@nuxt/eslintを使ったNuxtでのESLint設定

この記事は

Mac x VScodeでNuxtするときの最低限のESLint設定についてのメモ。
@nuxt/eslintを使います。
https://eslint.nuxt.com/packages/module

eslintのvscodeへのインストール

@nuxt/eslintモジュールの追加とeslint.config.mjsファイルの生成

以下コマンドで@nuxt/eslintモジュールを追加する。

npx nuxi module add eslint

モジュール追加後、npm run devなどでアプリケーションを起動するとeslint.config.mjsが生成されるので、必要に応じてカスタマイズ。

eslint.config.mjs

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // Your custom configs here
)

ESLint Stylistic

nuxt.config.tsにESLint Stylisticの設定をする。

nuxt.config.ts

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

ちなみにESlint Stylisticとは

ESLint Stylisticは、ESLint内でコードのスタイルやフォーマットを統一するためのルールセット。
Prettierとは違うアプローチでコードのフォーマットを実行できる。

NPM Scriptsへlintコマンドを設定

package.jsonにeslintコマンドを設定したのち、npm run lint app.vueを試すと、

package.json

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

このような感じになる。

VScodeの設定

以下設定で保存時の自動フォーマットが実行される。

.vscode/settings.json

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

ES Lint v9以前はESLint Flat configの設定をのためにVScodeに以下設定が必要だったが、v9以降は不要。

{
  // Enable ESlint flat config support
  "eslint.experimental.useFlatConfig": true
}

ついでにrecommendationsの設定もしておく。

.vscode/extensions.json

{
    "recommendations": [
        "dbaeumer.vscode-eslint"
    ]
}