[React] GitHub Actions for Prettier and ESLint

2021-06-27 hit count image

Let's see how to execute Prettier and ESLint by GitHub Actions in React.

Blog series

This blog post is a series. You can see the other posts on the link below.

Outline

Until now, we’ve configured Prettier and ESLit to the React project with create-react-app, and we’ve used husky and lint-staged to execute Prettier and ESLint automatically. In this blog post, I will show you how to use GitHub Actions to execute Prettier and ESlint when Pull request is created.

You can see the full source code of the blog post on the link below.

GitHub Actions

To use GitHub Actions, let’s make GitHub Actions configuration file. Create the ./.github/workflows/main.yml file and modify it like the below.

name: Check the source code
on:
  pull_request:
    branches:
      - main
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - name: Install packages
        run: npm ci
      - name: Prettier
        run: npm run format
      - name: Lint
        run: npm run lint

Let’s see the code one by one.

This GitHub Actions name is Check the source code.

name: Check the source code
...

This GitHub Actions is executed when the main branch gets Pull Request.

...
on:
  pull_request:
    branches:
      - main
...

This GitHub Actions has a Flow named Check the source code, and is executed on ubuntu.

...
jobs:
  test:
    name: Check the source code
    runs-on: ubuntu-latest
...

First, get the source code from Repositoy.

...
jobs:
  test:
    ...
    steps:
      - uses: actions/[email protected]
...

And then, install the Node packages on the source code, and execute the npm scripts of Prettier and ESLint that we’ve defined before.

...
jobs:
  test:
    ...
    steps:
      ...
      - name: Install packages
        run: npm ci
      - name: Prettier
        run: npm run format
      - name: Lint
        run: npm run lint

After modifying the file, execute the commands below to upload it to GitHub.

git add .
git commit -m 'Add GitHub Actions'
git push origin main

Check

Let’s check GitHub Actions working well. Execute the command below to make a new branch.

git checkout -b test-pr

And the, open the ./src/App.tsx file and modify it like the below.

const App = (): JSX.Element => {
  console.log('test!');
  return (
    ...
  );
};

And then, execute the commands below to upload it to GitHub.

git add .
git commit -m 'Add test code'
git push origin test-pr

If you can’t commit because of husky and lint-staged that we’ve defined, open the ./package.json file and delete the code like below.

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "eslint --ext .tsx --ext .ts ./src"
    ],
    "./src/**": [
      "prettier --check ./src"
    ]
  },
  ...
}

And then, execute the commands below again to upload the modified contents to GitHub.

git commit -m 'Add test code'
git push origin test-pr

After uploading to GitHub, go to the GitHub site, and click the Pull requests tab, and the click New pull request to create a new Pull Request.

GitHub create pull request

If you configure GitHub Actions well, you can seel the error of GitHub Actions on the bottom of Pull request you’ve created.

GitHub actions error

When you click the Details on the right side, you can see the details of the GitHub Actions error.

GitHub actions error details

You can see the details about that one file doesn’t follow the ESLint rules we’ve set. Through this, we can know the GitHub Actions that we’ve set is working well.

Complated

Done! we’ve seen how to execute Prettier and ESLint by GitHub Actions. We can know the problems by husky and lint-staged, but all developers are not in same developmenet environment. Now, we can execute the Prettier and ESlint on the same environment created by GitHub actions to check the source code!

You can implement various features with GitHub Actions in addition to Prettier and ESLint. Please try to implement CI/CD with GitHub Actions!

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts