github-actions-playgroun
ESLint の前準備
Github Actions で自動的に ESLint を適用する実験を行うために、以下の条件で設定ファイルを作成する。
✔ How would you like to use ESLint? · style
node_modules
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScriptこれで以下の設定ファイルが作成される。
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ["airbnb-base"],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: 13,
sourceType: "module",
},
plugins: ["@typescript-eslint"],
rules: {},
};この状態で下記のサンプルファイルを作成する。
const name = "shimopino";
console.log(name);これで ESLint を適用すると、以下の様に表示される￥。
❯❯❯ npx eslint sample.ts
/Users/shimopino/Desktop/praha/work/playground/sample.ts
1:14 error Strings must use singlequote quotes
3:1 warning Unexpected console statement no-console
4:1 error Too many blank lines at the end of file. Max of 0 allowed no-multiple-empty-lines
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the `--fix` option.この出力結果を Github Actions で再現できる様にする。
Github Actions
以下のワークフローを作成する。
name: eslint check
on:
pull_request:
types: [opened, reopened, synchronize]
jobs:
run-eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node
with:
node-version: "14"
- run: npm ci
- run: npm run lintプルリクを出す
ブランチを切って以下のコードの修正を行う。
{
const name = "shimopino";
console.log(name);
}またワークフローで静的解析を実行した際にエラーを発生させるために、一時的にエラーとして報告されるようにルールの変更をおこなっておく。
rules: {
"no-console": "error",
},これでプルリクを作成すると、以下の様にワークフローが起動していることがわかる。
実際にワークフローのログを確認すると、ESLint のルール変更に合わせて、静的解析が失敗していることがわかる。
ここで ESLint が成功する様に、コードを以下の様に編集する。
{
const name = "shimopino";
name.toLowerCase();
// console.log(name)
}ここで再度コミットをプッシュすると、自動的にワークフローが起動していることがわかる。
静的解析が成功すれば以下の様に、全ての検査項目をパスしていることがわかる。
