Prettier is an useful tool to format Javascript related code. It is compatible with several IDEs. I used to set up it with VS Code and Webstorm. So I decide to record this procedure.

Install

https://prettier.io/docs/en/install.html

Editor Integration

https://prettier.io/docs/en/editors.html

VSCode Configuration

https://github.com/prettier/prettier-vscode

We need to set prettier as default formatter first

In VSCode, we can use .prettierrc.json to configure

There is another great tutorial for Prettier and ESLint configuration:

https://github.com/truonand000/ESLint_Prettier_Tutorial

Webstorm Configuration

https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install

In Webstorm, we don’t need to configure with .prettierrc.json, we can add the configuration in package.json .

1
2
3
4
5
6
7
8
9

...
"devDependencies": {
  "prettier": "2.1.2"
},
"prettier": {
  "tabWidth": 4
}
...

The options we can configure will be found here:

https://prettier.io/docs/en/options.html

In Mac OS, we can use cmd + opt + L to format the code or format on save.