My Journey
Code format consistency is a big challenge. The goal, of course, is to get everything 100% consistent. But, the more people working on the codebase, the harder that becomes. Careful and detailed code reviews can catch some of these things but they take significant time to find and resolve. And even so, something always slips through.
Setting up ESLint helped a lot with this. ESLint has a lot of rules for code formatting which are included in Airbnb's ESLint configuration. But it was not enough — ESLint could not format everything. Maybe it could in the future, but until then Prettier helped me solve this challenge.
Prettier
Prettier is the formatting big brother to ESLint. Where ESLint focuses mainly on code quality with some code formatting, Prettier focuses exclusively on code formatting. It is much more powerful, entirely auto fixable, and requires little to no configuration.
Prettier vs ESLint
But ESLint can also do code formatting with the right rules enabled. So at first glance, Prettier seems redundant. But Prettier is far more capable and covers a much broader range of code formatting topics.
For example, ESLint has a max-len that would error if the line length is larger than 80 (if using the default configuration). The following line, therefore, would produce an error since the object is defined all in one line.
const badFormat1 = {
// the object definition below is all in one line
firstName: 'John', lastName: 'Doe', username: 'johndoe', email: 'johndoe@gmail.com', phone: '+1 (234) 567-8900', age: 32, sex: 'male',
};
But ESLint does not have a way to automatically fix this error. In addition, this same object can be defined in multiple ways and ESLint would not be able to fix it.
const badFormat2 = {
firstName: 'John',
// the object definition below is all in one line
lastName: 'Doe', username: 'johndoe', email: '[johndoe@gmail.com](mailto:johndoe@gmail.com)', phone: '+1 (234) 567-8900', age: 32, sex: 'male',
};
This leads to an inconsistency that ESLint can't resolve.
But Prettier can. No matter how we format the above example, Prettier will automatically “prettify” the code into the following.
const goodFormat = {
firstName: 'John',
lastName: 'Doe',
username: 'johndoe',
email: '[johndoe@gmail.com](mailto:johndoe@gmail.com)',
phone: '+1 (234) 567-8900',
age: 32,
sex: 'male',
};
This is just one example, There are scores of abilities that Prettier has that ESLint just does not.
Customization
Similar to ESLint, Prettier allows you to customize formatting options such as line width, tab width, semicolons, quotes, brackets, and several more. These configurations are saved into the prettier.config.js configuration file.
// prettier.config.js
module.exports = {
singleQuote: true,
arrowParens: 'avoid',
};
But this is nowhere near to extent of customization that ESLint has. This can be perceived as a drawback of Prettier. In actuality, this is the philosophy behind Prettier — it was built to be an opinionated, self assertive formatter. Prettier aims to stop differing personal styling opinions and debates by providing a rigid styling standard of its own. And while some people may not like it, Prettier's styling is incredibly popular — it's installed in various projects over 40 million times a month.
When I first migrated to Prettier, I too, had this concern. I was used to the way I styled and Prettier's styling was new and different. After a few weeks though, I got used to it. And I never thought about it again (thinking about it to write this article does not count).
ESLint Integration
Prettier can also be integrated into ESLint so you don't need a separate process to run it. Prettier provides eslint-plugin-prettier and eslint-config-prettier to accomplish this. The prettier plugin makes the prettier rule available to ESLint which is subsequently enabled through the recommended extension.
// .eslintrc.js
module.exports = {
extends: [
'airbnb',
'plugin:prettier/recommended'
'prettier/react',
],
};
Unfortunately, this prettier rule may conflict with existing ESLint styling rules. The ESLint prettier configuration resolves this by disabling the conflicting rules. In the above example, the airbnb extension includes the React ESLint plugin so the prettier/react extension is necessary to disable those rules. Prettier also provides disables for other ESLint plugins such @typescript-eslint/eslint-plugin and eslint-plugin-vue with the prettier/@typescript-eslint and prettier/vue extensions respectively. Since these extensions disable the previous extensions' rules, make sure to put them last so they can override the previous extensions.
Migration
Prettier is completely auto fixable! This makes migration a breeze. Using Prettier's CLI, npx prettier --check --write, or ESLint's auto fix, npx eslint . --fix, all your errors, even if there are tens of thousands, will be fixed in an instant. This makes integrating Prettier incredibly simple.
Final Thoughts
Prettier is an amazing library for code formatting because it simply does everything for you. It introduces a code styling standard to ensure formatting consistency. It automatically fixes non-compliant code to conform to this standard. It frees time otherwise spent on code formatting to focus on product development. Give Prettier a try and though you may not like the styling changes initially, you'll love that you never have to think about styling again.
