Nuxt3でESLintの設定をする

Nuxt3

案件でNuxt3のESLint設定をすることがあったので手順をメモしておきます。

Nuxt3はNo PrettierポリシーなのでPrettierは推奨されておらずフォーマッティングも含めてESLintを利用することが推奨されています。

Nuxt3のインストール

まずは以下のコマンドでNuxt3のインストール。マネージメントツールはnpmにします。

npx nuxi@latest init my-app

インストールしたら起動しておきます。

cd my-app
npm run dev

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

以下のパッケージをインストールします。

npm install -D eslint eslint-plugin-nuxt @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

設定ファイル

.eslintrcを以下のような内容でルートに配置します。

基本の設定にmulti-word-component-namesのルールからlayoutsディレクトリやpagesディレクトリを除外するように追加で設定しています。

{
    "root": true,
    "env": {
      "browser": true,
      "es6": true
    },
    "extends": [
      "eslint:recommended",
      "@nuxtjs/eslint-config-typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/vue3-recommended"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "sourceType": "module"
    },
    "plugins": ["vue", "@typescript-eslint"],
    "overrides": [
      {
        "files": ["layouts/*.vue", "pages/**/*.vue"],
        "rules": { "vue/multi-word-component-names": "off" }
      }
    ]
}

実行スクリプトを追加

package.jsonのscriptsに実行コマンドを追加

{
  ...
  "scripts": {
    ...
    "lint": "eslint --fix './**/*.vue'"
  },
  ....
}

これでESLintが利用できますので `npm run lint` でESLintが実行されるか確認しておきます。

VS Code用の設定を追加

以下の内容を　`.vscode/settings.json` に記述しておきます。

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

これで自動保存時にESLintの内容でフォーマッティングが行われます。

スポンサードリンク

«Next.jsのAPI RoutesでAuth0の認可を実装する | メイン | Vue.jsでコンポーネントの要素をpropsによって切り替える»