Nuxt3のESLintの導入メモ

Nuxt3にESLintを導入する手順をまとめました。Flat ConfigとStylisticを使ってVSCodeでの保存時にフォーマットされるように設定しています。

Nuxt ESLintの導入

基本的には公式ページで説明されている手順で導入していきます。

まずは下記のコマンドで @nuxt/eslint モジュールを導入します。

npx nuxi module add eslint

nuxt.config.ts の設定

npxコマンドからNuxt ESLintを導入すると、 nuxt.config.ts に下記のコードが自動で追加されます。

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

eslint.config.mjs の設定

npxコマンドからNuxt ESLintを導入すると、 eslint.config.mjs が自動で生成されます。

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

export default withNuxt(
  // Your custom configs here
)

VSCodeの settings.json の設定

VSCodeで保存時に自動フォーマットされるようにするため、 .vsocode/settings.json に下記のコードを追加します。

{
  // ...,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    // Required in vscode-eslint < v3.0.10 only
    // "eslint.useFlatConfig": true
  },
}

"eslint.useFlatConfig": true はESLintの拡張機能が古いバージョンを使っている場合に必要。

ESLintがうまく動かない

上記の手順で公式の手順によると問題なく動作するはずなのですが、自分の環境ではうまく動きませんでした。

あまりここに時間を費やしたくないので、下記のコードを手動で追加。

// @ts-check
import withNuxt from "./.nuxt/eslint.config.mjs";
import js from "@eslint/js";
import vue from "eslint-plugin-vue";
import stylistic from "@stylistic/eslint-plugin";

export default withNuxt([
    js.configs.recommended,
    ...vue.configs["flat/recommended"],
    {
        plugins: {
            stylistic,
        },
        rules: {
            "stylistic/semi": ["error", "always"],
            "stylistic/quotes": ["error", "double"],
            "stylistic/indent": ["error", "tab"],
            "stylistic/no-multiple-empty-lines": ["error", { "max": 1 }],
            "stylistic/comma-spacing": ["error", { before: false, after: true }],
            "stylistic/space-in-parens": ["error", "never"],
            "stylistic/space-infix-ops": ["error", { int32Hint: false }],
            "stylistic/object-curly-spacing": ["error", "always"]
        },
    },
    {
        languageOptions: {
            globals: {
                defineNuxtConfig: "readonly",
            },
        },
        rules:{
            "vue/multi-word-component-names": "off",
            "vue/html-indent": [2, "tab"],
        }
    },
]);

ひとまず、上記の設定を追加することでエラーの検知と、VSCodeでの保存時に自動でフォーマットされるようになりました。

残課題

とりあえずESLintでフォーマットできるようになりましたが、本来の使い方と異なっていると思うので、時間がある時に改めて修正しようと思います。

参考

• Nuxt ESLint
• ESLint Stylistic