Prettier is an opinionated code formatter that supports a lot of different programming language syntax, like:
- JavaScript
- JSON
- JSX
- CSS
- Markdown
And it even has plugins for languages like Ruby, Python and more.
Also, it integrates with popular Text Editor such as Atom and VSCode, and it can be run automatically on save.
Prettier is very popular because it improves code readability and make coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code looks good without ever dabbling in formatting.
Setting up Prettier
Prettier is written in JavaScript and can be run from npm or yarn. You only need to install it using the command line on your project.
Install with yarn:
yarn add prettier --dev --exact
# Then test run it
yarn prettier --write index/src.js
You can use npm if you like:
npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier
# Then test run it
npx prettier --write index/src.js
# or global
prettier --write index/src.js
The configuration file
Although Prettier comes with opinionated style, we can still change the formatting by creating a configuration file in our project. You can view the full documentation here.
For example, if we want JavaScript semicolon after each statement, we can use “semi” rule. Here is an example of rules I modified for my projects.
# .prettierrc file
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
Working With ESLint
Some pro developers used Prettier together with ESLint to improve their productivity to the next level. If you are working on VSCode, You can checkout this tutorial for integrating ESLint + Prettier + AirBnB Style Guide