【Nuxt 3】ESLintの導入

はじめに

ESLintのv9.0.0からFlat Configがデフォルトで採用されており、従来の設定ファイルより構造がシンプルになっています。 この記事では、Nuxt3にFlat Configを用いてESLintの導入方法について解説していきます。

導入

Nuxt3の公式ドキュメントに記載の通り、Nuxt ESLint (@nuxt/eslint)を使用します。

• Code Style . Nuxt Concepts
• Nuxt ESLint

インストールは以下のコマンドを実行します。

$ npx nuxi module add eslint

内部的には以下の処理が行われています。

• @nuxt/eslintのインストール（執筆時はv0.6.0）
• nuxt.config.tsのmodulesに追加
  nuxt.config.ts

  export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: ['@nuxt/eslint']  //ここ
  })

• eslint.config.mjsの生成
  eslint.config.mjs

  // @ts-check
  import withNuxt from './.nuxt/eslint.config.mjs'
  
  export default withNuxt(
    // Your custom configs here
  )

ESLintの設定は、従来の.eslintrcではなく、生成されたeslint.config.mjsにて行います。

設定

eslint.config.mjs

生成されたeslint.config.mjsに設定を記述します。

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

export default withNuxt(
  {
    files: ['**/*.vue', '**/*.js', '**/*.ts'],
    rules: {
      "no-console": "off",
      "@typescript-eslint/no-explicit-any": "off"
      //...
    }
  },
  {
    files: ['**/*.vue'],
    rules: {
      "vue/multi-word-component-names": "warn"
      //...
    }
  }
)

filesで対象ファイルを定義し、rulesに検査ルールを定義します。 上記例のように複数分けて定義することができます。

ルールについては、各ドキュメントを参照してください。 一部ルールのみ記載しておきます。

• ESLint

  https://eslint.org/docs/latest/rules/

  ルール名	説明	デフォルト設定
  no-unused-vars	使用されていない変数を報告する	error
  no-undef	定義されていない変数を報告する	error
  no-console	console.logなどのコンソール出力を報告する	warn
  curly	if/for/whileなどのブロックをカンマで閉じる	error
  no-var	varの使用を報告する	error
  prefer-const	定数を宣言する際にconstを推奨する	error
  eqeqeq	厳密等価演算子（===）の使用を強制する	error
  no-duplicate-imports	同じモジュールの複数のインポートを禁止する	error
  no-implicit-coercion	暗黙の型変換を禁止する	error
  no-shadow	変数のスコープに関する影響を報告する	error

• Typescript

  https://typescript-eslint.io/rules/

  ルール名	説明	デフォルト値
  @typescript-eslint/no-unused-vars	未使用の変数を検出	error
  @typescript-eslint/no-explicit-any	any型の使用を禁止	error
  @typescript-eslint/no-empty-function	空の関数を禁止	error
  @typescript-eslint/no-floating-promises	プロミスのチェーンが無視されていることを検出	error
  @typescript-eslint/indent	インデントのスタイルをチェック	off
  @typescript-eslint/quotes	シングルクォートとダブルクォートの使用をチェック	off
  @typescript-eslint/member-ordering	メンバーの順序をチェック	off
  @typescript-eslint/no-implicit-any-catch	catchブロックでany型を使用しない	error
  @typescript-eslint/no-unsafe-assignment	安全でない代入を禁止	error
  @typescript-eslint/no-var-requires	requireを使ったモジュールのインポートを禁止	error
  @typescript-eslint/no-unnecessary-type-assertion	不要な型断定を禁止	error

• Vue

  https://eslint.vuejs.org/rules/MX

  ルール名	説明	デフォルト設定
  vue/comment-directive	<template>内のコメントディレクティブをサポート	off
  vue/jsx-uses-vars	JSXで使用される変数を未使用として報告しない	off
  vue/multi-word-component-names	コンポーネント名を必ず複数単語にする	error
  vue/no-arrow-functions-in-watch	watch属性でのアロー関数の使用を禁止	error
  vue/no-async-in-computed-properties	computedプロパティ内での非同期処理を禁止	error
  vue/no-child-content	ディレクティブ（例：v-html、v-text）で上書きされる子要素の使用を禁止	error
  vue/no-computed-properties-in-data	dataプロパティ内でのcomputedプロパティの使用を禁止	error
  vue/no-custom-modifiers-on-v-model	v-modelにカスタムモディファイアを使用しない	error

Stylistic

@nuxt/eslintには、コードの整形を行うためのESLint Stylisticが含まれています。 コード整形といえばPrettierが有名ですが、ESLint Stylisticがあれば不要です。 ESLint Stylisticは、nuxt.config.tsに以下のように設定します。

export default defineNuxtConfig({
  modules: ['@nuxt/eslint',],
  eslint: {
    config: {
      stylistic: {
        arrowParens: true,
        blockSpacing: true,
        braceStyle: 'stroustrup',
        commaDangle: 'always',
        flat: true,
        indent: 2,
        quoteProps: 'as-needed',
        quotes: 'single',
        semi: false,
      },
    },
  },
},)

実行

ESLintを実行するために、package.jsonに以下のスクリプトを追加します。

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

$ npm run lint
$ npm run lint:fix

  9:7  error  'test' is assigned a value but never used. Allowed unused vars must match /^_/u  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

実行すると上記のような結果が表示されます。 この例の場合、@typescript-eslint/no-unused-varsのルールに従い、使用されていないtestが対象ファイルの指定行にあることを教えてくれています。

stylisticの設定や一部のルールについては--fixによって自動で整形してくれます。

VSCodeの設定

VSCodeを使用している場合は、ESLintの拡張機能を追加し、.vscode/settings.jsonを追加します。 この設定により、ファイル保存時に--fixが実行され整形が行われます。

実行されない場合は設定が反映されていない可能性があるため、VSCodeを再起動してみるなどしてください。

ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

{
  "eslint.useFlatConfig": true,  //Flat Configを適用
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"  //保存時に整形
  }
}