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.
Top comments (0)