Hello, I hope you are having a good day.

No need to think about code format anymore. No need to debate about the code style in the code review. No need to being upset if your teammate change your code style. That what is on my mind when I hear Prettier. That’s why code formatter is essential for me. Every modern programming languages have their own formatter, either it is built-in or using third party from community like Prettier. So, whatever your programming language is, in my opinion it is important to utilize it and boost team productivity.

Here is what I did:

  1. Install Prettier in development dependency. Run npm i -D prettier or yarn add -D prettier
  2. Create two scripts in the package.json file to format the code and to check the format to be called later in the CI/CD pipeline
{
  // ...the rest of the package.json
  "scripts": {
    "format": "prettier --ignore-path .gitignore --ignore-unknown --write .",
    "format:check": "prettier --ignore-path .gitignore --ignore-unknown --check ."
  }
  // ...the rest of the package.json
}

  1. Create the GitHub Actions workflow in the ./.github/workflows/code-quality.yaml. The workflow basically run the following steps:

    1. Checkout the repository to the CI/CD server
    2. Setup Node.js
    3. Install the application dependencies
    4. Run the format checker

Here is what the file looks like.

name: 🕵️‍♂️ Static Code Analysis

on: push

jobs:
  check-format:
    name: 📏 Check Format
    runs-on: ubuntu-latest
    steps:
      - name: ⬇️ Checkout repo
        uses: actions/checkout@v4

      - name: ⎔ Setup node
        uses: actions/setup-node@v3
        with:
          node-version: "18"
          cache: "npm"

      - name: 📥 Install deps
        run: npm ci

      - name: 📏 Check Format
        run: npm run format:check
  # ...the rest of the ./.github/workflows/code-quality.yaml file

That’s all from me. I hope this helps you get an idea of how to set up Prettier in GitHub Actions.