GitHub ActionsでTypeScriptとESLintとPrettierの検査を行う
November 20, 2021
以下を参考に package.json 及びワークフロー定義を作成してください。
package.json #
package.json
{
"scripts": {
"lint:tsc": "tsc --noEmit",
"lint:eslint": "eslint src --ext .js,.jsx,.ts,.tsx",
"lint:prettier": "prettier --check src"
}
}
- 上記は
srcディレクトリ下に検査対象のファイルが配置されている前提としています。 - 検査対象ファイルのディレクトリや拡張子は各自の環境に合わせて適宜変更ください。
GitHub Actions のワークフロー定義 #
.github/workflows/lint.yml
name: Lint
on:
pull_request:
jobs:
TSC:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 16
cache: 'npm'
- run: npm ci
- run: npm run lint:tsc
ESLint:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 16
cache: 'npm'
- run: npm ci
- run: npm run lint:eslint
Prettier:
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 16
cache: 'npm'
- run: npm ci
- run: npm run lint:prettier
- 各ジョブの中で先ほど
package.jsonにて定義した３つの検査を実行しています。 - 上記はプルリクエスト時に実行されるように指定しています。
- 例えばプッシュ時に実行したい場合はワークフロー定義の
onの部分を修正してください。
ワークフロー定義について補足 #
TypeScript、ESLint、Prettier の検査は独立しているため、ワークフローの完了時間を早めるためにそれぞれを別のジョブとして並列実行しています。
その結果、各ジョブの中で node モジュールのインストールを行う必要が生じます。ある意味、共通の処理を各々個別に実施している状態となってしまいます。また、モジュールのインストールにかかる時間は少なくありません。
つまり、別々のジョブに分割したことによってワークフローが起動してから完了するまでの時間は短くなりましたが、一方でワークフロー全体での実行時間は増加してしまいました。
例えば GitHub の Free プランなら１ヶ月間に実行可能な GitHub Actions は 2,000 分という制約があり、実行時間はできるだけ短くする必要があります。
ジョブを並列化したまま node モジュールを共有させるためには node モジュールをキャッシュさせるのが良いです。actions/setup-node@v2 部分で cache: 'npm' と書くだけでモジュールをキャッシングすることができます。
参考