Nextjs 13 × ESLintのプロジェクトを作成して、Github Actions上でESLintのチェックをする
Tatsukiプロジェクトを作成
下記コマンド実行
npx create-next-app@latest --typescript
いろいろ聞かれるけど下記のように回答
✔ What is your project named? … next-github-actions-test
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*
開発サーバー立ち上げ
yarn dev -c
http://localhost:3001/にアクセスしてページが表示されれば作成完了
TatsukiESLintの設定
rootディレクトリ内にある.eslintrc.jsonを編集する
※"eslint:recommended"を追加した
{
"extends": ["next/core-web-vitals","eslint:recommended"]
}
保存時にlayout.tsxなどでlinterのエラーが発生すれば成功
yarn lintコマンドを実行すれば確認可能
yarn lint
yarn run v1.22.19
$ next lint
※省略
./src/app/api/hello/route.ts
1:27 Error: 'request' is defined but never used. no-unused-vars
./src/app/layout.tsx
11:13 Error: 'React' is not defined. no-undef
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
"eslint:recommended"とは
ESLintが推奨している設定項目
Tatsukiチームに導入するときにはディスカッションをする必要がある
TatsukiGithub actionsの設定
rootディレクトリに.github/workflows/linter.ymlファイルを作成する
[想定]
チーム開発を想定して、developブランチとmainブランチをLinterの対象とする
push時とPR作成時にチェックする
name: lint-check
on:
push:
branches:
- main
- develop
pull_request:
branches:
- main
- develop
jobs:
lint:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [17.x]
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: yarn install --frozen-lockfile --ignore-scripts
- name: Run lint check
run: yarn lint
- name: Reviewdog
uses: reviewdog/action-eslint@v1
with:
eslint-github-check-bright: true
mainブランチにpushするとActionsにエラーが出ていることが確認できる。
詳細を見るとlocalで実行した内容と同様のエラーが表示されている
TatsukiLintのエラーに出ている箇所を修正する。
今回は新規ブランチを作成して、mainブランチに向けてPRを作成する
TatsukiPRを作成すると、Github actionsのLinterが動作していることがわかる
TatsukiLinterにエラーが出ないと、Merge pull requestのボタンが緑色に変化し、
チェックに問題がないことが表示されている
Tatsukiエラーが出るパターンもテストする
layout.tsxに未使用の変数を宣言する
import React from 'react'
import './globals.css'
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
// これを追加
const test = "test param"
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
ブランチを切ってmainブランチに向けてPRを作成する
PRにエラーが表示されていることが確認できる
Tatsuki展望
StylelintやjestについてもGithub actionsで実行できるようにする
Tatsuki作業ブランチ(ページ先頭と同じ)