既存のNuxtプロジェクトにESLintを導入する方法

既存のNuxtプロジェクトにESLintを導入する方法

新規に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

https://github.com/nuxt/eslint-config

https://qiita.com/ta1nakamura/items/a7fa31f9cc7f34d20895

Nuxt.jsカテゴリの最新記事