Keep your code format clean using prettier
Tags: prettier
Published: 2019-08-31 09:08:33

I recently used [`prettier`](https://github.com/prettier/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](https://prettier.io/docs/en/install.html), 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:

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

And please prepare a dirty sample markdown like:

```bash
$ touch test.md
```

```markdown
# 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:

```markdown
# 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](https://prettier.io/docs/en/configuration.html).

### 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`.

```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:

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

```yaml
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/