Nuxt 3でeslintrcとPrettierからFlat ConfigとESLint stylisticに移行する

目標

• Nuxt 3プロジェクトで使用しているeslintrcとPrettierからFlat ConfigとESLint stylisticに移行する

条件

• Nuxt 3プロジェクトでeslintrcとPrettierを使用していること

※eslintrcとPrettierを導入していない場合は、eslintrcとPrettierの設定を削除する手順をスキップして、Flat ConfigとESLint stylisticの導入手順のみ参照ください。

移行背景

• ESLint v9でFlat Config がデフォルトでサポートされ、eslintrc は非推奨になり、ESLint v10でeslintrcが削除されるため。詳細はこちらを参照ください。

https://eslint.org/blog/2023/10/flat-config-rollout-plans/

• Nuxtの公式でFlat Configがサポートされ、eslintcからの乗り換えを推奨されているため。詳細はこちらを参照ください。

https://eslint.nuxt.com/packages/module

目次

1. ESLint Moduleインストール
2. eslintrcからFlat Configへの移行
3. PrettierからESLint stylisticへの移行
4. ESLint stylisticの自動実行

ESLint Moduleインストール

• このモジュールはESLint v9以降のデフォルトフォーマットであるESLint Flat Configをサポートしています。また、開発サーバー側でESLintチェックを実行する機能を提供しています。
• eslintrcはこのモジュールをサポートしていません。
• このモジュールのより詳細な情報は以下を参照ください。

https://eslint.nuxt.com/packages/module

1. Nuxt の公式から提供されている ESLint Moduleをインストールします。

npm install --save-dev @nuxt/eslint eslint

2. nuxt.config.tsに以下を追加します。

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
})

eslintrcからFlat Configへの移行

• 不要なライブラリやコンフィグファイルを削除し、Flat Configを導入します。
• ご自身の環境によって不要な手順が存在する場合があります。

1. 不要なライブラリを削除します。

npm uninstall @nuxtjs/eslint-config-typescript

2. package.jsonから以下の不要なライブラリを削除します。

"devDependencies": {
　"@nuxtjs/eslint-config-typescript": "^12.1.0",
},

3. eslintrcファイルを削除します。以下は削除対象のeslintrcファイルの中身の一例です。

{
   "extends": [
     "@nuxtjs/eslint-config-typescript"
   ],
   "rules": {
     "no-console": "off"
   }
}

4. eslint.config.mjsをプロジェクトのルートディレクトリに作成して以下の内容で保存します。VSCodeを再起動し、ルールが適用されていることを確認します。

// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  {
    // 適用するファイルを指定
    files: ['**/*.js', '**/*.ts'],
    // 除外するファイルを指定。--ignore-pathで指定されていたものを指定
    ignores: ['**/*.log*', '.cache/**'],
    // 適用するルールを指定
    rules: {
      'no-console': 'off',
    },
  },
　// 特定のファイルに別のルールを指定したい場合
  {
    files: ['**/*.vue',],
    rules: {
      'no-console': 'error'
    }
  }
)

※eslint.config.mjsで設定できるオプションの詳細は以下を参照ください。
https://eslint.org/docs/latest/use/configure/configuration-files
※ignoresにはデフォルトで以下が指定されています。ソースコードはこちらを参照ください。

1.     '**/dist',
2.     '**/node_modules',
3.     '**/.nuxt',
4.     '**/.output',
5.     '**/.vercel',
6.     '**/.netlify',

5. npmスクリプトを以下の内容で修正します。
【修正前】

"scripts": {
　"lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
},

【修正後】

"scripts": {
　"lint": "eslint .",
　"lint:fix": "eslint . --fix",
},

※--ignore-pathオプションは削除されたため、eslint.config.mjsのignoresに--ignore-pathオプションで指定していたファイル・ディレクトリを指定します。--ignore-pathに.gitignoreを指定していた場合は.gitignoreファイルに記載のファイル・ディレクトリをeslint.config.mjsのignoresに指定します。

6. VSCodeのESLint拡張機能でFlat Configを有効にするために .vscode/setting.jsonに以下を追加して保存します。

{
  "eslint.experimental.useFlatConfig": true
}

※ESLint v9.xのサポートはESLint VS Code extension (vscode-eslint) v3.0.10で追加されたため、v3.0.10以降をインストールしている場合は上記の設定は不要です。

PrettierからESLint stylisticへの移行

• 不要なライブラリやコンフィグファイルを削除し、ESLint stylisticを導入します。
• ご自身の環境によって不要な手順が存在する場合があります。

1. 不要なライブラリを削除します。

npm uninstall prettier eslint-config-prettier eslint-plugin-prettier

2. package.jsonから以下の不要なライブラリを削除します。

"devDependencies": {
  "eslint-plugin-prettier": "^5.1.0",
  "eslint-config-prettier": "^8.3.0",
  "prettier": "^2.5.1",
},

3. prettierrcファイルを削除します。以下は削除対象のprettierrcファイルの中身の一例です。

{
  "indent": 2,
  "quotes": 'single',
  "semi": false
}

4. nuxt.config.tsに以下を追加します。VSCodeを再起動し、ルールが適用されていることを確認します。

// nuxt.config.ts
export default defineNuxtConfig({
  eslint: {
    config: {
      stylistic: {
        indent: 2,
        quotes: 'single',
        semi: false,
      },
    }
  }
})

ESLint stylisticの自動実行

• VSCodeで保存時にESLint stylisticを実行してフォーマットすることができます。

1. .vscode/setting.jsonに以下を追加して保存します。保存時にフォーマットが実行されていることを確認します。

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

以上で全ての手順は完了になります