Keep your code format clean using prettier

I recently used prettier to keep my team's code format clean, then I felt it worked well.

This post introduces how to use prettier in a team.

What kind of project do we start?

As an example, let's think about a situation we will create a git repository and write a lot of markdown documentation, and anyone can contribute to the repository.

We surely want to keep the code format clean and consistent.

Install prettier

Following this documentation, we can install prettier.

In this post, I use yarn to install it.
All we have to do is executing yarn add prettier --dev --exact in the project root.

After that, we would get package.json and yarn.lock.

How to use prettier

To try to use prettier, Let's update package.json like:

{
  "scripts": {
    "prettier": "prettier *.md --write"
  },
  "devDependencies": {
    "prettier": "xxx"
  }
}

And please prepare a dirty sample markdown like:

$ touch test.md

# Test

## testtest

This is a test!

- test1
- test2

Then let's invoke yarn prettier.
After that, the sample file's format would become clean like:

# Test

## testtest

This is a test!

- test1
- test2

In this post, I will use the default configuration, but if you would like to configure, please refer to this documentation.

Use prettier on CI to validate the code format

Currently, to keep the code format clean, everyone has to always execute yarn prettier while modifying files. I feel it's very easy to forget.

To notice some format is unexpected soon, let's use CI.

At first, to check the code format, we can use prettier --check. Let's add another command to package.json.

{
  "scripts": {
    "prettier": "prettier *.md --write",
    "lint:prettier": "prettier --check *.md"
  },
  "devDependencies": {
    "prettier": "xxx"
  }
}

To review the code each other, we basically use GitHub or something like that. Then we can invoke the validation command in every pull request via CI like CircleCI.

This is sample CircleCI configuration:

$ mkdir -p .circleci & touch .circleci/config.yml

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:10
    working_directory: ~/repo

    steps:
      - checkout
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "yarn.lock" }}
            - v1-dependencies-

      - run: yarn install

      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "yarn.lock" }}

      - run:
          name: Prettier
          command: yarn lint:prettier

After integrating GitHub and CircleCI, we can ensure the code format (if some format is unexpected, the CI fails).

To contribute to the project, yarn prettier is a must for everyone.

Summary

• prettier is very convenient and easy to use.
• Using prettier on CI, we would be able to keep our code clean more robustly.

References

• https://github.com/prettier/prettier
• https://prettier.io/docs/en/