Rails
Vue.js
ESLint
Rails5
webpacker

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

More than 1 year has passed since last update.

今回は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