Nuxt3でESLintの設定をリポジトリの中身を読みながら行う

Nuxt3でESlintを設定する際に、どのように設定すればいいのか迷うことがあります。
この記事では、公式リポジトリの設定を見比べながらどのように設定すればいいのか、何が設定されているのかを解説していきます。

対象読者

• ・ Nuxt3でESlintを導入しようとしている方
• ・ 自分のESLintの設定が合っているのか不安な方
• ・ ESlintを設定したがなぜ動いているのかよくわかっていない方
• ・ Githubのコードを読みながら確認する手法を身に着けたい方

なお、すでにNuxt3の環境が整っていることが前提になります。

設定方法

手っ取り早く設定したい人は以下の手順で構成可能です。

nuxt/eslint-configの手順通りに進めれば設定できます。

なお、@nuxt/eslint-configと@nuxtjs/eslint-configの構成がありますが、@nuxt/eslint-configがNuxt3の設定です。

@nuxt/eslint-configとeslintをdevDependenciesにインストールします。

yarn add -D @nuxt/eslint-config eslint

.eslintrc.cjsを作成して、以下のように記述します。

module.exports = {
  root: true,
  extends: ["@nuxt/eslint-config"],
};

package.jsonにスクリプトエントリーを追加します。

{
  "scripts": {
    "lint": "eslint ."
  }
}

linterを実行します。

yarn lint

こちらで設定は完了です。

本当にこの構成で大丈夫なのか？

大丈夫です。根拠としては、

• ・ nuxt/eslint-configがNuxt3の公式リポジトリで管理されている
• ・ Nuxt3自体で使用されている

ことがあげられます。

nuxt/eslint-configはどのような設定を行っているのか？

本題です。実際にnuxt/eslint-configがどのような設定をしているのか確認していきます。

パッケージの特定

nuxt/eslint-configには@nuxt/eslint-configと@nuxtjs/eslint-configと2種類のパッケージがあります。
結論からいうと、@nuxt/eslint-configがNuxt3のパッケージになります。それは、

Non-opinionated ESlint configuration for Nuxt 3 apps.

という文から読み解くことができます。

また、複数のパッケージを使用しているということはnpm v7で追加されたworkspace機能を使用しています。
workspace機能の解説は、npm workspace の使い方 - Qiitaがわかりやすかったです。

package.json を確認してみると、

{
  // 省略
  "workspaces": [
    "packages/*"
  ],
  // 省略
}

の記述があるため、packagesディレクトリを見てみます。

legacyではないだろうということで、eslint-configのpackage.jsonを見ていきます。

{
  "name": "@nuxt/eslint-config",
  "version": "0.1.1",
//   省略
}

nameが@nuxt/eslint-configなので間違いなさそうですね！

設定を見ていく

eslint-config/index.jsを見ると、eslintの設定が書いてあります。

package.jsonとindex.jsの内容と全く同じ設定にすればnuxt/eslint-configをインストールしなくてもNuxt3でESlintが使えるようになります。

カスタマイズするには

nuxt/eslint-configを入れている場合は、.eslintrc.cjsの設定を変更してください。

ただ、extendsの順番を制御したい場合などはeslint-config/packages/eslint-configと同じ設定を自分で入れていく必要がありそうです。

このブログではairbnb-baseを使用しているのですが、

{
  "root": true,
  "extends": [
    "airbnb-base",
    "@nuxt/eslint-config"
  ],
  "rules": {
    "import/no-unresolved": "off",
    "import/no-extraneous-dependencies": "off"
  },
  "overrides": [
    {
      "files": [
        "**/components/**/*.{js,ts,vue}"
      ],
      "rules": { "vue/multi-word-component-names": "off" }
    },
    {
      "files": [
        "tailwind.config.js"
      ],
      "rules": { "import/no-extraneous-dependencies": "off" }
    }
  ]
}

といくつか設定を上書きをしています。

まとめ

• ・ nuxt/eslint-configの手順通りに進めれば設定できる
• ・ @nuxt/eslint-configがNuxt3の設定、@nuxtjs/eslint-configがNuxt2の設定
• ・ リポジトリを見ればどのような設定がされているのかわかるようになる

Nuxt3はまだまだリリースされたばかりです。今後も拡張されていくと思うので楽しみですね！
ESlintの設定を行い、よりNuxt3が開発しやすい環境を整えて見ましょう！