In this post I will showcase my experience adding prettier formatting automation to every PR on GitHub

GitHub Actions to your codebase to automate workflows related to deployment, testing...etc to performs any sort of checks or running scripts when a predefined event happens. If it seems confusing, following a quick guide like this one will definitely help. GitHub Actions also has a marketplace where there's a ton of workflow created by some amazing people and companies ready to use with just a few clicks.

GitHub Actions are YAML files that get executed a set of commands (a job) when a predefined event happens (like a pull request) then you get notified about the status (success/failure) all completely automated within the development flow.

Problem

How one pull request has 156 files and tens of thousands of lines changed caused by local IDE settings for each user contributing to the codebase.

Solution

First having a local styling config .prettierrc files is essential to productivity

{
    "arrowParens": "avoid",
    "printWidth": 80,
    "singleQuote": true,
    "trailingComma": "es5",
    "semi": false,
    "tabWidth": 2,
    "bracketSpacing": false,
    "jsxBracketSameLine": true
}

After that, an automated pipeline can be implemented to enforce certain rules. Github Action get the job done and is definitely my favorite tool to have next to a pull request

Steps

1. start by creating a hidden folder .github/workflows at the root of your project
2. creating a .yml files
3. check the GitHub marketplace, chances are somebody already created the pipeline you're looking for
4. Read the docs
5. Here's a sample of what a job looks like:

# This is a basic workflow to help you get started with Actions

name: Format

# Controls when the action will run. 
on:
  # Triggers the workflow on pull request events but only for the master branch
  pull_request:
    branches: [master]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  format:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.head_ref }}
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - name: Format
        run: |
          yarn --frozen-lockfile
          yarn format
      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v4.1.2
        with:
          commit_message: Apply formatting changes
          branch: ${{ github.head_ref }}

in this case, I have a script in package.json

"format": "prettier --write \"./**/*.{js,jsx,json}\"",

When the job runs it hits the command yarn format which will make sure everything uses the same formatting.

Results

Now only true change is reflected in the pull request and it's all automated on GitHub.

---

I hope this helps and reach out if you need help! 👍

Cheers,