[2024年4月版]Nuxt3 + Pug +TypeScript 環境にESLintとフォーマッタを設定する方法

VSCodeでVue3を扱う場合、「Vue – Official」プラグインの利用が推奨となりましたので、公式のヘルプを見ながら環境を作り直しました。

私は、templateにPugを好んで使用しているのですが、あいにくtemplate内にLintが効かなくなってしまい、途方に暮れる状態になってしまいました。

また、ESLintは次のバージョンで設定方法が大きく変わるそうですので、それらも踏まえてLint環境を見直すことにしました。

Nuxt3には「@nuxt/eslint」が推奨されている

2024年4月現在、Nuxt3には「@nuxt/eslint」が推奨となっています。そんな訳で、Lint関連のモジュールを一旦全部アンインストールしてやります。

私の場合は、こんな感じ↓でした。

npm un @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-nuxt

さらに、コードのフォーマットをPrettierでなくESLintにやらせたいので、Prettier関連のモジュールもアンインストールします。

身軽になったところで、セットアップを開始します。

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

え？これだけでいいの？と驚くシンプルさですね。すばらしい。

「nuxt.config.ts」にモジュールを登録します。

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

さらにプロジェクトのルートに「eslint.config.mjs」を置きます。rulesの内容はお好みに合わせて変更してやってください。

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

export default withNuxt(
  {
    files: ['**/*.vue'],
    rules: {
      'vue/require-v-for-key': 'error',
      'vue/no-use-v-if-with-v-for': 'error',
    },
  },
  {
    files: ['**/*.vue', '**/*.ts'],
    rules: {
      'no-console': 'error',
      '@typescript-eslint/no-explicit-any': 'error',
    },
  },
)

コードのフォーマットをPrettierでなくESLintにやってもらいたい

これまでは、ESLintとPrettierを組み合わせて使うことが多かったのですが、ルールがぶつかるのを避けるための設定が必要だったり何かと手間がかかるので、Prettierを使わずESLintにフォーマットを担当してもらいます。（Prettier、今までありがとう👋）

「nuxt.config.ts」にフォーマットのルールを記述します。

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

  eslint: {
    config: {
      stylistic: {
        indent: 2, // インデントはスペース2
        quotes: 'single', // クオートはシングル
        semi: false, // セミコロンは不要
      },
    },
  },
})

「nuxt.config.ts」に記述するのは違和感があるので「eslint.config.mjs」に書きたいという場合は、以下のように記述します。

+ import stylistic from '@stylistic/eslint-plugin'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  {
    files: ['**/*.vue'],
    rules: {
      'vue/require-v-for-key': 'error',
      'vue/no-use-v-if-with-v-for': 'error',
    },
  },
  {
    files: ['**/*.vue', '**/*.ts'],
    rules: {
      'no-console': 'error',
      '@typescript-eslint/no-explicit-any': 'error',
    },
  },
+  stylistic.configs.customize({
+    indent: 2, // インデントはスペース2
+    quotes: 'single', // クオートはシングル
+    semi: false, // セミコロンは不要
+  }),
)

さらに「package.json」に以下も追加して、コマンドラインで使えるようにしておきましょう。

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

さらにさらに、VS CodeのESLint拡張機能はESLintの新しい設定形式にデフォルトで対応していないため、.vscode/settings.json に以下の設定を追加して有効にしてやります。

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

尚、保存時に自動的にフォーマットが実行されるようにしたい場合は、以下のように記述します。

{
    "eslint.experimental.useFlatConfig": true,
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.stylelint": "always"
+    }
}

これでファイルを保存する際にコードのフォーマットも行われるようになりますが、もし指定したルールでフォーマットされない場合は、VSCodeで使用するフォーマッターの設定がVSCode内蔵のPrettierなどになっているのかも知れません。既定のフォーマッタが「TypeScriptとJavascriptの言語機能」になっているか確認してください。

以上で一般的な設定は完了ですが、この状態ではまだPugにLintが当たりません。つらい。

PugにもLintが効くようにしたい（切望）

どうしたものかと思案し、以下のモジュールを追加しました。

npm install --save-dev eslint-plugin-vue-pug

そして「eslint.config.mjs」を以下のように書き換えます。
※ルールは私が現在進行中のプロジェクトに合わせて書き換えてあります。

+ import { FlatCompat } from '@eslint/eslintrc'
import withNuxt from './.nuxt/eslint.config.mjs'

+ const eslintrc = new FlatCompat()

export default withNuxt(
+  ...eslintrc.extends('plugin:vue-pug/vue3-recommended'),
  {
    files: ['**/*.vue'],
    rules: {
      'vue/valid-template-root': 'off',
      'vue/no-multiple-template-root': 'off',
    },
  },
  {
    files: ['**/*.vue', '**/*.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/ban-types': 'off',
    },
  },
)

ひととおり設定できたら、念のためにVSCodeを閉じて開き直しましょう。

おそらくPugにもLintが当たるようになったのではないでしょうか？

※うまくいかない場合は、npm run dev してあげると解消するかも知れません。

デフォルト設定のままだとルールが強くてworningが出まくるので、プロジェクトに応じて制限を緩めたいなと思っているところです。

おわり！