[rails]webpackerでforemanの設定とeslintの設定をした

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が動いているのがわかる。

まとめ

途中苦戦して色々試しながらやっていたため、
雑なまとめになってしまいました。。
今度もう一回新規プロジェクト立ち上げる時にこれ見ながら
本当にいけるか確かめて見たいと思います。