Nuxt.jsでESLint + Prettierを使う際の設定
本記事はNuxt.jsでESLintとPrettierを導入した際に行った設定を備忘録も兼ねて紹介します。
基本的には公式ドキュメントを参考にして設定しているので、こちらで分かる人は公式ドキュメントを読む方が早いかもしれません。
本記事では公式ドキュメントから一部カスタマイズをしたり、補足説明を加えたものになります。
本記事で達成すること
特定のエディタ・IDEに依存しないESLint + Prettier実行環境
必要なモジュールの追加
まずは必要なモジュールをnpm経由でインストールします。
今回必要なモジュールは以下となっています。
- babel-eslint
- eslint
- eslint-config-prettier
- eslint-loader
- eslint-plugin-prettier
- eslint-plugin-vue
- prettier
これを下記コマンドでインストールしましょう。
npm i -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettierESLintの設定ファイルを作成
必要なモジュールをインストールしたら、次はESLintの設定を行いましょう。
.eslintrc.jsというファイルをプロジェクト直下に作成し、下記を記述します。
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'eslint:recommended',
"plugin:vue/recommended",
'plugin:prettier/recommended',
],
// required to lint *.vue files
plugins: ["vue"],
// add your custom rules here
rules: {
"semi": [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
}
}],
"prettier/prettier": ["error", { "semi": false }]
}
};これで設定は終了です。
実行用コマンドをnpm-scriptsとして追加する
実行用コマンドを打てばいつでも実行できますが、毎回コマンドを打つのも面倒なので、エイリアスをnpm-scriptとして登録しておきましょう。
下記のコマンドをpackage.jsonのscriptsに記述します。
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}設定したオプションを簡単に説明しておきます。
--ext
実行するファイルの拡張子を設定--ignore-path
無視したいファイルを設定。デフォルトは.eslintignoreここでは.gitignoreを指定してGitHubと除外ファイルの設定を共有しています。
保存時にLintを実行する
npm-scriptsでいつでも実行できるようになりましたが、開発中はそれすらも面倒ですよね。
Nuxt.jsではnuxt.config.js内に下記の設定を記述することでファイルの変更を検知してくれ、変更時にLintが走るようになります。
export default {
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /\.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/
})
}
}
}
}