概要
本記事では、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
と同じ階層に以下の設定ファイルを作成してください。
{
"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実行するコマンドを追加します。
"scripts": {
"lint-dry": "eslint 'resources/**/*.{js,vue}'"
}
以下の規約違反があるvueファイルを作成します。
- ①複数の属性をもつ要素は、1 行に 1 要素ずつ、複数の行にわたって書くべきです。
- ②使用していない変数が存在する
<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 ルール名
先ほどのエラーが表示されたファイルで試してみます。
<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
:該当のファイルパス
{
"overrides": [
{
"rules": {
"vue/max-attributes-per-line": "off",
"no-unused-vars": "off"
},
"files": [
"resources/js/components/HelloVue.vue"
]
}
]
}
-
.eslintrc.json
にルールを追加
{
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
".eslintrc-todo.json" // ここに追加
],
"plugins": [],
"parserOptions": {},
"env": {"browser": true},
"globals": {},
"rules": {}
}
ターミナルでnpm run lint-dry
を実行して、エラーが表示されなければ完了です