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 をすると 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 には反映できるのでそっちでも良さそう
