Rails + webpacker + Vue.jsプロジェクトにESLintを導入

今回はVue.js用の公式ESLintプラグインを使用します。

パッケージインストール

$ yarn add -D eslint eslint-loader eslint-plugin-vue

Loaderの設定

config/webpack/loaders/eslint.jsを作成します。

module.exports = {
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  options: {}
}

さらにenvironment.jsを編集します。

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')
const eslint =  require('./loaders/eslint')

environment.loaders.append('vue', vue)
environment.loaders.append('eslint', eslint)
module.exports = environment

ESLintルールを作成

.eslintrc.jsonをプロジェクト直下に作成します。
ここは自由にカスタマイズしてください。

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "semi": "error",
    "indent": ["error", 2],
    "quotes": ["error", "single"]
  }
}

開発サーバーの起動

$ bin/webpack-dev-server

でコンパイルされ、その時にESLintも走るようになります。

実行スクリプトの用意

ESLint単体で動かしたい時用に設定します。
package.jsonに実行スクリプトを記述します。

{
  .
  .
  .
  "scripts": {
    "lint": "yarn run eslint --ext .vue --ext .js app/javascript"
  }
}

以下コマンドでESLintを実行できます。

$ yarn run lint

参考

eslint-plugin-vue を作っている話
Add eslint to rails 5.1 • Christoph Lipautz