Nuxt プロジェクトに ESLint を設定する

はじめに

Nuxt のプロジェクトに ESLint を導入する。

ESLint とは主に JavaScript のコードを分析して、問題のあるコードを見つけて修正することができるツールです。TypeScript も分析できます。

Nuxt に ESLint をインストール

公式サイトに書いてある通りに進めます。

ESLint Module - Nuxt ESLint

1. パッケージのインストール

以下のパッケージをインストールして下さい。

• @nuxt/eslint
• eslint
• typescript

npm install -D @nuxt/eslint eslint typescript

2. nuxt.config.tsの設定

nuxt.config.ts

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

3. eslint.config.mjsの作成

eslint.config.mjs

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

export default withNuxt(
  // your custom flat configs go here, for example:
  // {
  //   files: ['**/*.ts', '**/*.tsx'],
  //   rules: {
  //     'no-console': 'off' // allow console.log in TypeScript files
  //   }
  // },
  // {
  //   ...
  // }
)

4. npm の scripts を設定

package.json

{
  "scripts": {
    "lint": "eslint ."
  }
}

5. ESLint を実行

npm run lintとターミナルで実行します。

実行結果が出力されたら成功です。