N-LAB

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

投稿日: 2024年7月14日


目標


条件

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

移行背景

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

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

目次

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


ESLint Moduleインストール

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への移行


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への移行


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の自動実行


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

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



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