Nuxt3プロジェクトにESLintを導入する

こんにちは、合同会社Stegの@keigoです。 今回は、Nuxt3プロジェクトにESlintを導入するやり方を紹介します。

方針としては、Prettierなどの別Formatterは導入せず、LinterやFormatterはESLintのみを導入するものとします。

ESLintのルールは、Nuxtが公開している@nuxt/eslint-configをextendsして利用します。

必要な依存関係のインストール

以下の2つを導入します。

• eslint
• @nuxt/eslint-config

インストールコマンド

npm install -D eslint @nuxt/eslint-config

.eslintrc.cjsの作成

client/eslintrc.cjs を作成し、以下を記載する。

module.exports = {
  extends: ["@nuxt/eslint-config"]
};

以下のようにrulesを追記することも可能です。

module.exports = {
  extends: ["@nuxt/eslint-config"],
  rules: {
    "no-console": "error"
  }
};

以上で導入は終了です。(VSCodeのウィンドウ再起動が必要な可能性があります。)