Vue3でESLintを使ってみる（eslint-plugin-vue）

概要

本記事では、Vue3でESLint（eslint-plugin-vue）を実行する方法を紹介します。
（vue3は既にインストールしている想定で解説いたします。）

インストール

ESLint

npm install --save-dev eslint

eslint-plugin-vue

npm install --save-dev eslint eslint-plugin-vue

設定

package.jsonと同じ階層に以下の設定ファイルを作成してください。

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended"
  ],
  "plugins": [],
  "parserOptions": {},
  "env": {"browser": true},
  "globals": {},
  "rules": {}
}

extendsにはフォーマットのルールを記述します。

• eslint:recommended
  ESLint推奨のルールです。
  https://eslint.org/docs/latest/rules/

• plugin:vue/recommended
  ellint-plugin-vueのルールです。
  https://eslint.vuejs.org/rules/
  "plugin:vue/vue3-recommended"だと優先度A、B、Cのルールが適用されます。
  優先度Aだけ適用したい場合は以下のように記述すると良いです。
  "plugin:vue/vue3-essential"

試しに、ESLintが動作するかチェックしてみましょう。
package.jsonへdry実行するコマンドを追加します。

package.json

    "scripts": {
        "lint-dry": "eslint 'resources/**/*.{js,vue}'"
    }

以下の規約違反があるvueファイルを作成します。

• ①複数の属性をもつ要素は、1 行に 1 要素ずつ、複数の行にわたって書くべきです。
• ②使用していない変数が存在する

HelloVue.vue

<template>
  <!-- ① -->
  <input type="submit" value="Hello Vue">
</template>

<script>
import { onMounted } from 'vue'
export default ({
  setup() {
    console.log("start vue")
    var hogehoge;  // ②

    onMounted(() => {
      console.log('start mounted !')
    })
  },
})
</script>

ターミナルでnpm run lint-dryを実行すると、以下のエラーが表示されます。

  2:24  warning  'value' should be on a new line       vue/max-attributes-per-line
  10:9   error    'hogehoge' is defined but never used  no-unused-vars

期待通りの動作を確認出来ました

ルールを無効にする方法

ソースコード内に記述

無効にしたい行の前に以下形式で記述する必要があります。
eslint-disable-next-line ルール名

先ほどのエラーが表示されたファイルで試してみます。

HelloVue.vue

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line  -->
  <input type="submit" value="Hello Vue">
</template>

<script>
import { onMounted } from 'vue'
export default ({
  setup() {
    console.log("start vue")
    // eslint-disable-next-line no-unused-vars
    var hogehoge;

    onMounted(() => {
      console.log('start mounted !')
    })
  },
})
</script>

ターミナルでnpm run lint-dryを実行して、エラーが表示されなければ完了です

eslint-todo-generatorを導入する

https://www.npmjs.com/package/eslint-todo-generator
これを使うと除外したいルールをファイルで管理することが出来ます。
ソースコードにルールを記述するよりこちらの方が良いかと思いました。

インストール

npm i --save-dev eslint-todo-generator

設定

• 設定ファイルの作成

npx eslint-todo-generator -f json 'src/**/*'

• 設定ファイルにルールを記述する
  rules：無効化したいルール
  files：該当のファイルパス

.eslintrc-todo.json

{
  "overrides": [
    {
      "rules": {
        "vue/max-attributes-per-line": "off",
        "no-unused-vars": "off"
      },
      "files": [
        "resources/js/components/HelloVue.vue"
      ]
    }
  ]
}

• .eslintrc.jsonにルールを追加

.eslintrc.json

{
    "extends": [
      "eslint:recommended",
      "plugin:vue/vue3-recommended",
      ".eslintrc-todo.json" // ここに追加
    ],
    "plugins": [],
    "parserOptions": {},
    "env": {"browser": true},
    "globals": {},
    "rules": {}
}

ターミナルでnpm run lint-dryを実行して、エラーが表示されなければ完了です