とにかくDEVブランチにPUSHした時にES-Lintを自動で走らせたい

経緯

あるプロジェクトを進めている中で、lintを使い始めたが、せっかくならdevブランチにpushするたびに自動でチェックしてくれた方が便利だろという独断でES-Lintの自動チェックを挟むようにした
(本当はかっこいいからやってみたかっただけ)

実装方法

ローカルにES-Lint追加する

下記コマンドでES-Lintをローカルに追加する

npm install --save-dev eslint

package.jsonに追加

package.jsonのscript/lintに下記のように書くことで、npm run lint実行時にpages, components, layoutディレクトリ配下のvueファイルに対してlintのチェックが入るようになる。

package.json

...
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "lint": "eslint pages/**/*.vue & eslint components/**/*.vue & eslint layouts/**/*.vue"
  },

srcディレクトリにpages, components, layoutディレクトリを入れて、"eslint src"としても問題ないが、自分の環境上ちょっと面倒だったので、この形にした。

ymlファイルにLint自動実行を実装する

checkoutやSet Node.js 12.x, npm ciなど他の参考ページにも記載があったが、不要なのかと思い削除したら、package.jsonがないですと怒られたのでちゃんと下記のコードを使った方がいいと思う。

ubuntu-latest環境のホストランナーを立ち上げて、Node.jsをセットして、package-lock.jsonを利用してnpm ciしてから、ようやくnpm lintでLintチェックを行うという流れだと思われる。

lint.yml

# GitHubに記載されるこの自動作業の好きな名前を記載
name: lint runner

on:
　# mainかdevというブランチにpush時にjobsを実行
  push: 
    branches:
      - main
      - dev
  # mainかdevというブランチにpull_request時にjobsを実行
  pull_request:
    branches:
      - main
      - dev

jobs:
  lint:
    runs-on: ubuntu-latest
    # 下記が順番に実行される
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Set Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: ci
        run: npm ci
      - name: ESLint
        run: npm run lint

結果

あえてエラーを起こした状態のまま上記のコードをpushすると下記の画像のように失敗していることが確認できる
解決した場合は二枚目の画像の通り、チェックマークがつく

余談

実はreviewdogというものがあって、今回解説したようなものをすっ飛ばして簡単に実装できるらしい。
早く気づけばよかった。。。とりあえず後で使ってみる

参考