DEV Community

Hideaki Ishii
Hideaki Ishii

Posted on • Edited on

Keep your code format clean using prettier

#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"
  }
}
Enter fullscreen mode Exit fullscreen mode

And please prepare a dirty sample markdown like:

$ touch test.md
Enter fullscreen mode Exit fullscreen mode 
# Test

## testtest

This is a test!

- test1
- test2
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

graciesharma profile image

How to Create a Flipping Card Animation Using Framer Motion

graciesharma -

aaravjoshi profile image

7 Essential Java Security Techniques: A Developer's Guide

Aarav Joshi -

frorning profile image

Functional Programming with fp-ts in Node.js

Piyush Chauhan -

karell_stemarie_ce42bf9c profile image

The Code Smell Scam That Misled An Entire Generation Of Developers

Karell Ste-Marie -