railsプロジェクトでwebpackerでforemanとeslintを設定した話
railsプロジェクトでwebpackerを使ってforemanとeslintを設定しました。
途中苦戦しながらやったため、確実ではないうろ覚え程度なので
間違っているとこあったらコメントください。
あと、若干省略してるとこもあるかと。。。
お願いします。。
webpackerを入れる
まずはgemfileに
gem 'webpacker'
を記述し、bundle installを実行。
app/配下にjavascriptディレクトリができる(できたはず。)
javascript/packsにapplication.jsがあり、ここがエントリーポイントらしい。
foremanの設定
foremanもgemfileに。
gem 'foreman'
bundle installして
プロジェクト配下にProcfileを作成する。
中身は以下↓
rails: rails s --port=3000
webpack: bin/webpack-dev-server
eslintの設定
ここら辺から曖昧。。
色々試していて、エラーが出まくって
エラー内容に従ってyarn installとnpm installをした。
その後、ターミナルで
$yarn add -D eslint eslint-loader
を実行し、
config/webpack/loaders/配下にeslint.jsファイルを作成。
中身は以下↓
module.exports = {
test: '',
loader: 'aslant-loader',
enforce: 'pre',
options: {}
}
その後、config/webpack配下のenvironment.jsファイルを編集
中身は以下↓
const { environment } = require('@rails/webpacker');
const eslint = require('./loaders/eslint');
environment.loaders.append('eslint', eslint);
module.exports = environment;
その後、プロジェクト配下に.eslintrc.jsonファイルを作成
中身は以下↓
{
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
"rules": {
"semi": "error",
"indent": ["error", 2],
"quotes": ["error", "single"]
},
}
確認
foreman startを実行し、動くことを確認できた。
package.jsonファイルに以下を追加
{
"scripts": {
"lint": "yarn run eslint --ext .vue --ext .js app/frontend"
}
}
ターミナルで
$yarn run lint
を実行すると
lintが動いているのがわかる。
まとめ
途中苦戦して色々試しながらやっていたため、
雑なまとめになってしまいました。。
今度もう一回新規プロジェクト立ち上げる時にこれ見ながら
本当にいけるか確かめて見たいと思います。