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

NUXT.JSでコードをチーム内で統一したり、コーディングルールにそって綺麗に保つためにESLintを導入します。

ESLintにもコードを自動整形できる--fixがあるのですが、

最近はESLint自体を使わずにコードフォーマッターはPrettierを使用するのが流行りみたいです。

Prettierはなくても動作しますが、余計な設定を省いてくれるので一応使用する方向で解説します。

ESLintとPrettierのインストール

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

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 }]
  }
}

prettier、vue共にいろいろなパターンが用意されています。

vue

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

Prettier

→eslint-plugin-prettier git hub

・prettier/prettierのルールの適用(エラーレベル)

・eslint-config-prettierの設定呼び出し

ルールの追加設定

例えばvueファイルのインデントをdefaultの2から4にしたいときは下記になります。

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

ESLintの実行

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

npm run lintfix　設定したルールに合わせてファイルを修正・更新

上記設定ですとlint対象から無視するファイルの設定を.gitignoreにしています。

--ignore-pathを設定しない場合は、.eslintignoreファイルを参照します。

.eslintignoreの書き方は、.gitignoreと同様です。

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

NUXT.JSおすすめの書籍

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

書籍版は高いですが、Vue.jsもカバーしていてわかりやすいです。