Zenn
🦐

Nuxt 3の開発環境にESLintを導入する

2024/02/03に公開
Nuxt
Nuxt 3
tech

これはなに

Nuxt.js (Nuxt 3)で構築したWebアプリの環境にESLintをインストールし設定する方法のメモ。
VS Codeで自動実行までさせる。

環境

  • Nuxt 3.10.0
  • ESLint 8.56.0

はじめに

Nuxt.js 3では、@nuxt/eslint-configを利用したESLintの導入が推奨されている。

また、Nuxt.jsのドキュメントによると、本記事の執筆時点では、ESLintはフォーマットを実行しない。そのため、フォーマットのためには、Prettierなど別のツールを利用するよう書かれている。

At the moment, this configuration will not format your files; you can set up Prettier or another tool to do so.

Prettierの利用についてはここで議論されていたようだが、どうやらESLintでフォーマットまで行うのをやめたようだ。

よって、本稿では、ESLintをLinterとしてのみ利用する前提で導入する。

なお、本稿の導入方法は下記リンク先に準拠している。

インストールと設定方法

まず、eslintと@nuxt/eslint-configをインストールする。

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

次に、ESLintの設定ファイル.eslintrc.cjsを作成し、以下の内容を記述する。

.eslintrc.cjs
module.exports = {
  root: true,
  extends: ['@nuxt/eslint-config'],
}

その後、package.jsonにLint用のコマンドを追加する。

package.json
{
  "scripts": {
    "lint": "eslint --ignore-path .gitignore .",
    "fix": "eslint --fix --ignore-path .gitignore ."
  },
}

これでESLintを実行できるはずなので、以下のコマンドを実行してみる。

npm run lint

自動修正もできるか確認する。

npm run fix

最後に、VS CodeにESLintの拡張機能をインストールし、以下のVS Codeの設定を追記する。これにより、VS Codeでファイル保存時に自動でESLintを実行できる。

settings.json
{
  // Linter
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
}

もし、Nuxt.jsのプロジェクトがサブディレクトリにある場合は、VS Codeの設定に、以下のようにeslint.workingDirectoriesを追記する。

settings.json
{
  "eslint.workingDirectories": [
    "./nuxt-app"
  ],
}

おわりに

以上でLinterとしてのESLintの導入は完了である。FormatterであるPrettierの導入は下記リンク先に記載した。本稿がなにかの参考になれば幸いである。

参考文献・URL

Discussion