Nuxt.jsのプロジェクトに、ESLint、JavaScript Standard Style、Prettierを導入する方法を紹介します。
create-nuxt-appを使用する場合
プロジェクトの作成にcreate-nuxt-appを使用する場合、リントツールのオプションでESLintとPrettierを選択するだけで導入することができます。
create-nuxt-appを使用しない場合
ESLintを導入
create-nuxt-appでESLintを使用する設定でプロジェクトを作成した場合や、Nuxt.jsのスターターテンプレートを使用した場合は、あらかじめESLintが組み込まれています。
.eslintrc.jsファイルには、Vue.jsのための設定が記載されています。
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'plugin:vue/essential'
],
plugins: [
'vue'
],
rules: {}
}
nuxt.config.jsファイルには、ソースコードの更新時に自動でリントを実行するための設定が記載されています。
module.exports = {
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
スクラッチからプロジェクトを作っている場合、これらのファイルをプロジェクトに追加することで同じ構成にすることができます。
JavaScript Standard Style + Prettierを導入
パッケージをインストール
普通の方法ではJavaScript Standard StyleとPrettierのルールが競合してしまうので、両者を併用するためのパッケージであるeslint-config-prettier-standardをインストールします。
$ npm i -D eslint-config-prettier-standard eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-prettier prettier
ESLintに設定を追加
.eslintrc.jsファイルのextendsに、prettier-standardを追加します。
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
- 'plugin:vue/essential'
+ 'plugin:vue/essential',
+ 'prettier-standard'
],
plugins: [
'vue'
],
rules: {}
}
このとき、prettier-standardはextends内の最後に書く必要があります。
Make sure to put it last, so that it gets the chance to override other configs.
出典：eslint-config-prettier-standard - npm
注意
JavaScript Standard StyleとPrettierでは、関数宣言の括弧の前にスペースを入れるルール（space-before-function-paren）の扱いが異なるため、eslint-config-prettier-standardを用いてリントしたソースコードはJavaScript Standard Styleに完全に準拠しているとは言えません。1
Prettierr Flavored JavaScript Standard Styleとでも呼ぶべきでしょう。