Nuxtの公式を参考にしています。
パッケージをインストール
まずは必要なパッケージをインストールします。
- babel-eslint
- eslint
- eslint-config-prettier
- eslint-loader
- eslint-plugin-vue
- eslint-plugin-prettier
- prettier
yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
設定ファイルをいじる
ルートディレクトリ直下に.eslintrc.js
を作成して、下記の内容に変更する。(公式に少し手を加えています)
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: "babel-eslint",
},
extends: [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:prettier/recommended",
],
plugins: ["vue"],
rules: {
semi: [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"no-unused-vars": "off", //使っていない変数を許可
"vue/html-self-closing": "off", //空タグを許可する
"prettier/prettier": ["error", { semi: false }],
},
}
コマンドラインでlintを実行できるようにする
package.jsonにコマンドの設定をする。
"scripts": {
...,
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
},
上記のようにscriptに追加することでコマンドとして登録できます。
構文チェックならyarn lint
、構文エラーの修正ならyarn lintfix
で実行可能となります。
この状態で構文チェックができるようになっています。
ファイル保存時に構文チェックをする
現状では構文チェックをするためにはコマンドを叩く必要があります。これをファイル保存時に自動で構文チェックが走るように設定していきます。
公式の通りnuxt.config.jsをいじります。
...
/*
** Build configuration
*/
build: {
extend(config, ctx) {
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
})
}
}
}
nuxt.config.jsを編集したら設定を反映させるために必ずサーバを再起動します。
これでファイル保存時でも自動で構文チェックができるようになりました。
ハマログ
<img />で閉じると怒られる
HTML部分に<img />を使用していて、下記のような構文エラーがでました。
warning Disallow self-closing on HTML void elements (<img/>) vue/html-self-closing
ESlint側では閉じタグないのが許せないみたいです。
ルールに"vue/html-self-closing": "off",
を追加して回避しています。
使っていない変数があると怒られる
axiosの設定などで引数に使用していない変数を設定したりするのですが、そこで怒られてしまっていました。
構文チェック時に下記のようなエラーが出ます。
error 'app' is defined but never used no-unused-vars
こちらもルールに"no-unused-vars": "off",
を追加して回避しました。
参考
- ESLint/Prettier併用で<img />が怒られる問題
- 【Nuxt × VSCode】ESLintとPrettierの設定方法。自動で構文解析とフォーマットする【Vue】
- Prettier と ESLint/stylelint のルールの違い
- Development Tools – Nuxt.js