[NUXT.JS]ESLint and Prettierの設定の方法

NUXT.JSでコードをチーム内で統一したり、コーディングルールにそって綺麗に保つためにESLintを導入します。
ESLintにもコードを自動整形できる--fixがあるのですが、
最近はESLint自体を使わずにコードフォーマッターはPrettierを使用するのが流行りみたいです。
Prettierはなくても動作しますが、余計な設定を省いてくれるので一応使用する方向で解説します。

ESLintとPrettierのインストール

Nuxt.jsの公式に掲載されている情報を元に解説します。
Nuxt.js development tools

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

上記でnpmから必要なパッケージをインストールします。

ESLintの設定をする

インストールしたら、プロジェクトのrootディレクトリに.eslintrc.jsを設置します。
余談:.jsはESLintの公式を確認したら付与するのを推奨とのことです。
基本的な設定の中身は以下の通りです。

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',
    'prettier/prettier': ['error', { semi: false }]
  }
}

extends部分で、ベースとなるルールを設定しています。
prettier、vue共にいろいろなパターンが用意されています。

vue

Vue Available rules
Baseから始まって、より上位のルールは、それ以下のすべてのルールが適用されます。

Prettier

eslint-plugin-prettier git hub
上記Prettierの設定内容は下記の通りになります。
・eslint-plugin-prettierの有効化
・prettier/prettierのルールの適用(エラーレベル)
・eslint-config-prettierの設定呼び出し

ルールの追加設定

rules部分に追加で書き込んで行きます。
例えばvueファイルのインデントをdefaultの2から4にしたいときは下記になります。

rules: {
    'vue/html-indent': ['error', 4],
    ....
}

ESLintの実行

npmのpackage.jsonに下記を記載します。

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

npm run lint エラー、警告等の表示
npm run lintfix 設定したルールに合わせてファイルを修正・更新
上記設定ですとlint対象から無視するファイルの設定を.gitignoreにしています。
--ignore-pathを設定しない場合は、.eslintignoreファイルを参照します。
.eslintignoreの書き方は、.gitignoreと同様です。

以上、簡単ですが、Nuxt.jsでのESLintの設定の仕方でした。