これはなに
@nuxt/eslint-configを用いたeslintrcの設定から、ESLint Module（@nuxt/eslint）を用いたESLint flat configへ移行したときに取った手順のメモ。
手順
1. .eslintrc.cjsと.eslintignoreを削除する
Flat configでは.eslintrc.cjsでなくeslint.config.mjsを使う。そのため、.eslintrc.cjsは削除する。
Flat configでは.eslintignoreは廃止され、無視するファイルもeslint.config.jsに記述する。そのため、.eslintignoreも削除する。
2. package.jsonから、ESLint関連のライブラリを削除する
@nuxt/eslint-configとeslintを削除する。
eslint-config-prettierを入れている場合は、これも削除する。@nuxt/eslintモジュールは、デフォルトではフォーマットを実行しないため、Prettierなど別のフォーマッタを使う場合でも競合を起こさない。
3. @nuxt/eslintモジュールをプロジェクトに追加する
下記コマンドで@nuxt/eslintとeslintを入れる。
npm install --save-dev @nuxt/eslint eslintnuxt.config.tsに@nuxt/eslintモジュールを追加する。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// ...
modules: [
"@nuxtjs/tailwindcss",
"@nuxtjs/color-mode",
"@nuxtjs/i18n",
+ "@nuxt/eslint",
],
});
この状態で一度アプリを起動する。
npm run devすると、自動でeslint.config.mjsが生成される。
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
// Your custom configs here
)これでESLintが有効になる。
eslint.config.mjsを編集することで独自のルールを設けられる。
eslint.config.mjsを編集してルールを追加する
eslint.config.mjsを編集することで、ルールを追加できる。例を次に示す。
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
{
files: ['**/*.vue', '**/*.ts'],
rules: {
'no-console': 'warn',
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/typedef': 'error',
},
},
{
files: ['**/*.vue'],
ignores: ['pages/**/*.vue', 'layouts/**/*.vue'],
rules: {
'vue/multi-word-component-names': 'error',
},
},
{
files: ['**/*.vue'],
rules: {
'vue/no-multiple-template-root': 'error',
'vue/require-v-for-key': 'error',
'vue/no-use-v-if-with-v-for': 'error',
'vue/no-v-html': 'error',
'vue/require-default-prop': 'error',
},
},
).gitignoreに書かれたファイルを無視する
.eslintrcを利用していた場合は、--ignore-path .gitignoreオプションで、.gitignoreファイルに書かれたファイルを無視できた。しかし、このオプションはESLint flat configには存在しないため、別途設定が必要になる。
.gitignoreを追加する設定は公式に記載されている。
下記の記述は上記サイトのコードをそのまま引用したものである。
// eslint.config.js
import { includeIgnoreFile } from "@eslint/compat";
import path from "node:path";
import { fileURLToPath } from "node:url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");
export default [
includeIgnoreFile(gitignorePath),
{
// your overrides
}
];これをそのままeslint.config.mjsに追加すれば動作する。
なお、@eslint/compatはnpmでインストールする必要がある。
npm install @eslint/compat -DAppendix | ESLint Stylisticを有効にする
@nuxt/eslintモジュールは、デフォルトではフォーマットを実行しない。そのため、Prettierなど別のフォーマッタを使う場合は特に追加の設定は必要ない。
ESLintにはESLint Stylisticという機能があり、これを有効にすると、ESLintがフォーマットを実行する。
ESLint Stylisticは、nuxt.config.tsのeslintモジュールのオプションで、config.stylisticをtrueに設定すると有効化できる。
export default defineNuxtConfig({
// ...
eslint: {
config: {
stylistic: true,
},
},
});ルールをカスタマイズする場合は、stylisticオプションにルールを追加する。
