Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
Introduction to Prettier
Prettier is an opinionated code formatter.
It supports a lot of different syntax out of the box, including:
- JavaScript
- Flow, TypeScript
- CSS, SCSS, Less
- JSX
- GraphQL
- JSON
- Markdown
and with plugins you can use it for Python, PHP, Swift, Ruby, Java and more.
It integrates with the most popular code editors, including VS Code, Sublime Text, Atom and more.
Prettier is hugely popular, as in February 2018 it has been downloaded over 3.5 million times.
The most important links you need to know more about Prettier are
Less options
I learned Go recently and one of the best things about Go is gofmt, an official tool that automatically formats your code according to common standards.
95% (made up stat) of the Go code around looks exactly the same, because this tool can be easily enforced and since the style is defined for you by the Go maintainers, you are much more likely to adapt to that standard instead of insisting on your own style. Like tabs vs spaces, or where to put an opening bracket.
This might sound like a limitation, but it’s actually very powerful. All Go code looks the same.
Prettier is the gofmt
for the rest of the world.
It has very few options, and most of the decisions are already taken for you so you can stop arguing about style and little things, and focus on your code.
Difference with ESLint
ESLint is a linter, it does not just format, but it also highlights some errors thanks to its static analysis of the code.
It is an invaluable tool and it can be used alongside Prettier.
ESLint also highlights formatting issues, but since it’s a lot more configurable, everyone could have a different set of formatting rules. Prettier provides a common ground for all.
Now, there are a few things you can customize, like:
- the tab width
- the use of single quotes vs double quotes
- the line columns number
- the use of trailing commas
and some others, but Prettier tries to keep the number of those customizations under control, to avoid becoming too customizable.
Installation
Prettier can run from the command line, and you can install it using Yarn or npm.
Another great use case for Prettier is to run it on PRs for your Git repositories, for example on GitHub.
If you use a supported editor the best thing is to use Prettier directly from the editor, and the Prettier formatting will be run every time you save.
For example here is the Prettier extension for VS Code: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Prettier for beginners
If you think Prettier is just for teams, or for pro users, you are missing a good value proposition of this tool.
A good style enforces good habits.
Formatting is a topic that’s mostly overlooked by beginners, but having clean and consistent formatting is key to your success as a new developer.
Also, even if you started using JavaScript 2 weeks ago, with Prettier your code - style wise - will look just like code written from a JavaScript Guru writing JS since 1998.
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More devtools tutorials:
- Introduction to Yeoman
- Bower, the browser package manager
- Introduction to Frontend Testing
- Using node-webkit to create a Desktop App
- VS Code: use language-specific settings
- Introduction to Webpack
- A short and simple guide to Babel
- An introduction to Yarn
- Overview of the Browser DevTools
- Format your code with Prettier
- Keep your code clean with ESLint
- A list of cool Chrome DevTools Tips and Tricks
- Testing JavaScript with Jest
- How to use Visual Studio Code
- Introduction to Electron
- Parcel, a simpler webpack
- An Emmet reference for HTML
- The V8 JavaScript Engine
- Configuring VS Code
- Configuring the macOS command line
- How to disable an ESLint rule
- How to open VS Code from the command line
- How to set up hot reload on Electron