next lint の結果を Reviewdog でプルリクエストに反映する

Next.js github actions Reviewdog

next lint の結果を Reviewdog に食わせて PR にコメントとして出したかったんだけど結構ハマったのでメモ。

普通に next lint を動かしてもだめ

  "scripts": {
    "lint": "next lint"
  }

      - uses: reviewdog/action-setup@v1
        with:
          reviewdog_version: latest
      - name: Run reviewdog
        env:
          REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npm run lint | reviewdog -f=eslint -reporter=github-pr-review -filter-mode=diff_context -fail-on-error=true

こんな感じでやってみたんだけど、lint ではエラーが出てるけど reviewdog が PR に反映してくれなくてなんで? ってなっていた。

next lint はフォーマッタが eslint デフォルトと違う

next lint の warning メッセージ:

$ npm run lint:next

./src/hoge/index.tsx
39:6  Warning: React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

eslint の warning メッセージ:

& npm run lint:next

/Users/hoge/index.tsx
  39:6  warning  React Hook useEffect has an unnecessary dependency: 'ref.current'. Either exclude it or remove the dependency array. Mutable values like 'ref.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps

✖ 1 problems (0 errors, 1 warnings)

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

となっており、若干の違いがある。

next lint -f stylish

next lint にフォーマットを指定できるので、 -f stylish をすると reviewdog が解釈できるようになる。

https://eslint.org/docs/latest/use/formatters/#stylish にあるように、eslint は stylish がデフォルトフォーマットとなっている。

  "scripts": {
    "lint": "next lint -f stylish"
  }

これでPRにコメントしてくれるようになった。

おわり

Reviewdog で試行錯誤したPRは reviewdog by starhoshi · Pull Request #3 · starhoshi/romoco · GitHub で、最終的な workflow yml はこれです

name: Test
on: [pull_request]

jobs:
  build:
    name: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - run: npm ci
      - uses: reviewdog/action-setup@v1
        with:
          reviewdog_version: latest
      - name: Run reviewdog
        env:
          REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: npm run lint | reviewdog -f=eslint -reporter=github-pr-review -filter-mode=diff_context -fail-on-error=true

https://github.com/starhoshi/romoco/blob/main/.github/workflows/pr.yml

追記

Reviewdog を使わないで next lint -f stylish するだけで PR には反映できるのでそっちでも良さそう