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

0

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の設定の仕方でした。

NUXT.JSおすすめの書籍

Googleで検索したり、NUXT.JSのホームページのドキュメントで、大体の疑問や使い方は理解できると思うのですが体系的に学ぼうとするとやはり書籍が良いと思っています。下記は、おすすめの書籍です。
書籍版は高いですが、Vue.jsもカバーしていてわかりやすいです。
Vue.js&Nuxt.js超入門