新規にNuxtのプロジェクトを導入する際にESLintを使用するように設定する方法の記事はいくつかあったのですが、既存のNuxtプロジェクトにESLintを導入する手順についての記事が少なかったのでその方法についてまとめます。
ESLintとはjavascriptのための静的解析ツールです。Railsでいうところのrubocopにあたります。
このツールを使用することで開発プロジェクトのコードを一定の水準で保つことができます。
逆にこのツールがないと各々が好きなようにコードを書きコードレビューの負担が大きくなったりファイルによって書き方がバラバラになります。
では早速ESLintの導入をおこなっていきます。
モジュールのインストール
ESLintの使用に必要なモジュールをインストールします。
$ yarn add --dev eslint @nuxtjs/eslint-module @nuxtjs/eslint-config babel-eslint.eslintrc.jsファイルの設定
モジュールをインストールできたらnuxtアプリのルート直下に `.eslintrc.js`のファイルを作成します。
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
extends: [
'@nuxtjs'
],
// カスタムルールを追記
rules: {
}
}nuxt.config.jsの修正
nuxt.config.jsの設定をしていきます。
nuxt.config.js
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// Simple usage
'@nuxtjs/eslint-module',
],package.jsonの修正
最後に yarn lint でESLintのチェックが行われるようにpackage.jsonのscriptに追記します。
"script": {
...
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
},これで設定が完了したのでターミナルでESLintのチェックをしてみます。
$ yarn lint
...
35:7 warning Attribute "id" should go before "hide-footer" vue/attributes-order
37:7 warning Require self-closing on Vue.js custom components (<b-form-textarea>) vue/html-self-closing
39:8 warning Expected 1 line break after opening tag (`<b-form-textarea>`), but 2 line breaks found vue/multiline-html-element-content-newline
67:15 error Unexpected trailing comma comma-dangle
71:10 error Missing space before function parentheses space-before-function-paren
75:3 warning The "computed" property should be above the "mounted" property on line 71 vue/order-in-components
76:13 error Missing space before function parentheses space-before-function-paren
80:11 error Missing space before function parentheses space-before-function-paren
86:6 error Unexpected trailing comma comma-dangle
90:17 error Missing space before function parentheses space-before-function-paren
102:14 error Missing space before function parentheses space-before-function-paren
107:10 error Missing space before function parentheses space-before-function-paren
111:11 error Missing space before function parentheses space-before-function-paren
131:12 error Missing space before function parentheses space-before-function-paren
上記のようにESLintの規約に違反している物を表示してくれます。
導入については以上になります。ここからは規約についての解説をいくつかします。
コード規約
今回ESLintを導入した際に引っかかった規約についていくつかみてみます。
Unexpected trailing comma comma-dangle
このエラーはオブジェクトの { } の中のコンマの有無のチェックですね。デフォルトだと下記のような設定になっています。
NG
{
hoge: 'hogehoge',
fuga: 'fugafuga',
}
OK
{
hoge: 'hogehoge',
fuga: 'fugafuga'
}しかしこの状態だと新たにプロパティを追加した時にgitの差分が2行になるので複数行に渡って記述する場合はコンマは必要というオプションを追加します。
rules: {
'comma-dangle': ['error', 'always-multiline'],
}コードとしては下記のようにチェックされます。
NG
{
hoge: 'hogehoge',
fuga: 'fugafuga'
}
OK
{
hoge: 'hogehoge',
fuga: 'fugafuga',
}
{ hoge: 'hogehoge', fuga: 'fugafuga' }Missing space before function parentheses
これはファンクションを定義する時にスペースを空けないといけないという規約です。
NG
hoge() {
// 処理
}
OK
hoge () {
// 処理
}規約にしたがってもいいのですが、個人的にどっちでもいいかなと思うのでチェックから外します。
rules: {
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': 0
},Strings must use singlequote
この規約は文字列の場合はシングルクォーテーションを使用するという物です。
NG
const str = "hoge"
OK
const str = 'hoge'eslintに指摘されたファイルを修正して再度 yarn lint でチェックします。
$ yarn lint
yarn run v1.22.5
$ eslint --ext .js,.vue --ignore-path .gitignore .
✨ Done in 2.11s.最終的に上記のようにエラーが何も表示されなくなったらOKです。
最終的な.eslintrc.jsファイル
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
extends: [
'@nuxtjs',
],
// カスタムルールを追記
rules: {
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': 0,
},
}参考:
https://github.com/nuxt-community/eslint-module