LoginSignup
1
0

More than 1 year has passed since last update.

Vue3でESLintを使ってみる(eslint-plugin-vue)

Posted at

概要

本記事では、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

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

ルールを無効にする方法

ソースコード内に記述

無効にしたい行の前に以下形式で記述する必要があります。
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を実行して、エラーが表示されなければ完了です:ok_hand:

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を実行して、エラーが表示されなければ完了です:ok_hand:

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0