Rails + webpacker + Vueな環境にESLintを導入

webpacker install:vueをしている前提です。

パッケージインストール

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

Loaderを設定しenvironment.jsを編集

config/webpack/loaders/eslint.jsを作成し以下を記述

config/webpack/loaders/eslint.js

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

config/webpack/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

Lintルールの作成

.eslintrc.jsonをプロジェクト直下に作成し
ESLintルールを作成します。
ESLint ルール 一覧

/.eslintrc.json

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

セミコロンの付け忘れ、
インデントの字数、
Stringはシングルクオートのみ

の3つのルールを追加いたしました。

ここまで来たら

$ bin/webpack-dev-server

でwebpackerをコンパイルすると同時にESLintが走ります。

チェックしたくないファイルを除外する

プロジェクト直下に.eslintignoreを作成し対象ファイルを記述すると自動で除外します。

/.eslintignore

**/*.js