How to use Prettier as a Github Action

Maintaining code quality can often feel like a chore, especially when it comes to formatting. Enter Prettier: a lifesaver for developers who prioritize clean, readable code. But, repeatedly running Prettier manually can disrupt your workflow. The good news is that this process can be seamlessly automated with GitHub Actions. Let's dive into how you can make your development process more efficient.

Why Opt for GitHub Actions?

GitHub Actions offer a flexible way to automate all sorts of tasks within your GitHub repositories. Whether it's running tests, deploying code, or even non-code tasks like triggering Prettier, GitHub Actions has got you covered. This versatility is particularly useful in open-source projects, where consistency in code style is crucial. By automating Prettier, you free yourself and your collaborators to focus on writing effective code, rather than worrying about formatting details.

What Exactly is Prettier?

Prettier is a code formatter that ensures your code is consistently styled. It's not just a tool for those who are meticulous about their code's appearance; it's a godsend for anyone contributing to projects where a unified code style is essential. Prettier automatically formats your code, saving you from manual, time-consuming styling tasks.

Setting Up Prettier

To use Prettier in a Node.js project, start by installing the prettier package. If you're using npm, run the following command:

npm install prettier --save-dev

Once installed, Prettier can be configured to run on certain files or directories. This is done through a .prettierrc file in your project. For instance, to configure Prettier to format all files, your .prettierrc file would look like this:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "useTabs": false,
  "endOfLine": "auto"
}

Alternatively, you can run Prettier on specific files or directories using the npx command. For example:

npx prettier --write .

Integrating Prettier with GitHub Actions

To automate Prettier with GitHub Actions, you'll need to configure a YAML file in your repository. This file, typically named .github/workflows/prettier.yml, defines the conditions under which Prettier will run. Here’s an example configuration to run Prettier on every pull request to the develop and master branches:

name: Prettier Formatting

on:
  pull_request:
    branches:
      - master
      - develop

jobs:
  prettier:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
        with:
          ref: ${{ github.head_ref }}
          fetch-depth: 0
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Prettify code
        uses: creyD/prettier_action@v4.3
        with:
          prettier_options: '--write **/*.{js,ts,tsx,json,md,css}'
          github_token: ${{ secrets.GITHUB_TOKEN }}

This configuration ensures that every time you push to the develop or master branches, Prettier will run on all JavaScript, TypeScript, JSON, Markdown, and CSS files. If you want to run Prettier on all files, you can replace the prettier_options line with the following:

prettier_options: '--write .'

Configure Actions permissions

To run the newly created workflow, you'll need to allow the Github Actions workflow to read and write to your repository. Go to your Settings tab, then click on Actions -> General, move to the Workflow permissions section, and enable the Read and write option.

Conclusion

Through this guide, you've learned how to leverage Prettier alongside GitHub Actions to automate your code formatting process. This setup not only streamlines your workflow but also ensures consistency across your project’s codebase. By integrating these tools into your development cycle, you can focus more on coding and less on the minutiae of code styling.