Introduction

While working on a team consisting of multiple developers, it’s really important to have a predefined set of rules about different aspects of the project. Whether it is about the authority to review and merge the PRs, project planning, or providing access to the server.

So, consistency and proper workflow are essential while working in a team of multiple developers. And, one more important aspect that needs to have consistency is code formatting and implementation of fixed styling rules.

In this article, we will be looking at how we can format our code with Prettier(using CLIs) which will automatically format our code on every pull request to a certain branch(dev in our case) along with the help of Github Actions

---

Prerequisites

We first need to install Prettier, which is a node package. They also provide a VS Code Extension, but we’ll be working with a package since we will be formatting the files using command-line and Github Actions.

npm install --save-dev --save-exact prettier

Once we've installed the package, we need to create a file called .prettierignore on our root directory in order to ignore certain directories. Once created, let's include some directories so that Prettier won't format these files while executing the format command.

// .prettierignore
public
vendor
node_modules
storage

And now, we can format the files by running the command prettier --write ., and it will format all the files supported by Prettier in the current directory and its subdirectories. Later, we'll define an alias for this command.

---

Defining The Workflow

Once we’ve installed the package, the next thing is to define the workflow. So, let’s take a look at the workflow and I’ll explain each section as we go along:

// .github/prettier.yml

name: Fix Code Style

on:
  pull_request:
    branches: [dev]

jobs:
  prettier:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Install NPM dependencies
        run: npm install

      - name: Run Prettier
        run: npm run prettier

      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Apply Prettier changes
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_TOKEN }}

The first thing to note about this file is that it should be placed inside the .github folder of the root directory with an extension of .yml, otherwise it won’t work. In this case, we are creating a file called prettier.yml inside the .github folder.

---

name: Fix Code Style

on:
  pull_request:
    branches: [dev]

The first section of the action defines the name of the action, with the name: prefix, and the on: section defines what causes this action to trigger. In our case, the action will trigger whenever anyone makes a Pull Request to a dev branch. You can replace dev with any valid branch name you like, also check out the documentation of what other trigger options are available here.

---

jobs:
  prettier:
    runs-on: ubuntu-latest

The next section is the jobs section. Here, we can define the tasks that we need to run. In our case, we’ve defined a job called prettier, we can define multiple jobs here, and all of them should be defined at the same level (since it’s a .yml file) and Github Actions will run them one by one as per the order. In this case, we’re only defining one job that is prettier.

The next parameter passed is runs-on: which indicates where this action will be executed, which is an Ubuntu-based system in our case.

---

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

The next parameter passed is the steps: prefix. Here, we will define the necessary steps to accomplish the task.

The name: prefix, as the name says is to indicate the name of the task, and the uses: prefix is to indicate any third-party action that this action uses. And in this case, we will be using the checkout action to checkout (or clone) our code to the previously defined OS i.e Ubuntu.

---

      - name: Install NPM dependencies
        run: npm install

The next step is to install the node packages since we’ve only cloned the repo in the previous step, and in this step, we install the node packages by running npm install

---

      - name: Run Prettier
        run: npm run prettier

And then, we will be running the npm run prettier command to format all of the files of our repo. Note that we are using an alias called prettier, which isn't defined yet, so let's define an alias now.

Head over to the package.json file and inside the scripts section, define an alias like so:

// package.json

"scripts": {
    "dev": "npm run development",
    "prod": "npm run production",
    // this is the alias we are defining
    "prettier": "prettier --write ."
}

And now, we can run npm run prettier which will, in turn, run the prettier --write . command and format our files.

Check out their documentation to see what other options are available.

---

      - name: Commit changes
        uses: stefanzweifel/git-auto-commit-action@v4
        with:
          commit_message: Apply Prettier changes
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_TOKEN }}

Until this time, we have installed packages and formatted files on the virtual system. It does perform all the tasks but how do we reflect those changes to our repository? So, to make those changes to our repo, we will be using an auto-commit action called stefanzweifel/git-auto-commit-action and v4 is the latest at the time of writing this article.

But, before using this action, we need to set up a few stuff.

So, let's head over to this link (make sure you’re logged in to Github), to create a new token, give it a proper name, and also provide this token repo and workflow scopes, select expiration date as per our need. And then, click on Generate Token

Copy the generated token and head over to the Settings page of your Repository, inside the Secrets tab, click on the Actions link.

Click on New Repository Secret, give the name of the secret as PERSONAL_TOKEN, and paste the copied secret token value.

And now that everything is set up and ready, the above code will use that auto-commit-action and using that PERSONAL_TOKEN, commit to our repo with the message applied in the commit_message prefix.

---

Push Code to Github

The last thing that we need to do is commit and push these changes to our repository.

And the next time anyone makes a Pull Request to our repo on the dev branch, we can see that a new action is running which will perform all of the specified tasks, format the files and commit them to our repository, and along with that, we can also see what files this action has changed.

---

Reference Links

• Github Repository of Prettier
• Github Actions Documentation
• stefanzweifel/git-auto-commit-action