【Nuxt3】Nuxt3にESlintを導入する

前提

• node v18.0.0
• ※ 前回の動作環境を引き継いで進めていきます。

導入手順

以下に、Nuxt 3プロジェクトにESLintを導入する手順を説明します。

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

まず、Nuxt 3プロジェクトのルートディレクトリで以下のコマンドを実行して、必要なパッケージをインストールします。

yarn add @nuxt/eslint-config @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint --dev

設定ファイル

Nuxt3プロジェクトのルートディレクトリに.eslintrcという名前のESLintの設定ファイルを作成します。以下は、基本的な設定例です。

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "sourceType": "module"
  },
  "plugins": ["vue", "@typescript-eslint"]
}

.gitignoreを考慮する

gitignoreしているファイル群を考慮しておきたいので、–ignore-path を含めるコマンドを設定しておきます。

{
  "name": "firebase-study",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    ~~~
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." # ここを追加
  },
  ~~~
}

実行

以下のコマンドを叩いてみましょう

$ yarn lint

エラーや警告がポツポツと発生しています。

1:1   error    Component name "index" should always be multi-word                               vue/multi-word-component-names
   4:71  warning  'class' should be on a new line                                                  vue/max-attributes-per-line
   5:22  warning  'v-html' directive can lead to XSS attack                                        vue/no-v-html
   5:22  error    Using v-html on component may break component's content                          vue/no-v-text-v-html-on-component
   5:39  warning  Expected a space before '/>', but not found                                      vue/html-closing-bracket-spacing
   7:34  warning  '@click' should be on a new line                                                 vue/max-attributes-per-line
   7:62  warning  Expected 1 line break after opening tag (`<v-btn>`), but no line breaks found    vue/singleline-html-element-content-newline
   7:66  warning  Expected 1 line break before closing tag (`</v-btn>`), but no line breaks found  vue/singleline-html-element-content-newline
   8:34  warning  '@click' should be on a new line                                                 vue/max-attributes-per-line
   8:62  warning  Expected 1 line break after opening tag (`<v-btn>`), but no line breaks found    vue/singleline-html-element-content-newline
   8:67  warning  Expected 1 line break before closing tag (`</v-btn>`), but no line breaks found  vue/singleline-html-element-content-newline
  36:7   error    Type string trivially inferred from a string literal, remove type annotation     @typescript-eslint/no-inferrable-types

特定ルールの警告を修正

以下のコマンドにより、自動で修正してもらいます。

$ yarn lint --fix

だいぶ修正されました。

1:1  error  Component name "default" should always be multi-word  vue/multi-word-component-names
  1:1   error    Component name "index" should always be multi-word       vue/multi-word-component-names
  8:22  warning  'v-html' directive can lead to XSS attack                vue/no-v-html
  8:22  error    Using v-html on component may break component's content  vue/no-v-text-v-html-on-component

無視したいルール

開発を進めていく上で、ここはどうしても…という場合があるでしょう。
設定ファイルにルールを追記していきます。

• vue/no-v-html -> 後にサニタイズ対応の記事を書く予定
• vue/multi-word-component-names -> Nuxtの構成上仕方ないので無視

{
  "root": true,
  ~~~
  },
  "plugins": ["vue", "@typescript-eslint"],
  "rules": {
    "vue/multi-word-component-names": "off",
    "vue/no-v-html": "off"
  }
}

共有

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%236

【Hosting】
https://fir-study-42747.web.app/

お疲れ様でした。