Whenever I join a new project or team, there's always a lot of hassle to get used to the code style, formatting and general way of doing things. Even with my best foot put forward, most feedback on my first couple of pull requests typically sound like "use single quotes", "tabs not spaces" and "we like to put the braces on the next line".
Although I do appreciate my new comrades' effort in analyzing my code, I can't help but think that there might be some actual bugs in my code that's missed due to these easy-to-catch gotchas. Luckily, this is a thing of the past.
Prettier is the brain-child of Christopher Chedeau (@vjeux on twitter), and is one of the tools that currently help me not care about code formatting. It is a simple CLI tool that integrates with your favorite IDEs, and parses, analyzes and re-formats your code whenever you want. On commit? On save? That's all up to you.
Although it's opinionated, Prettier comes with a few common options for teams and organizations to quarrel over. At the time of writing, these include:
- print width (how long your lines are)
- tab vs spaces, and tab width (2 spaces? 4?)
- add or avoid semicolons at the end of an expression
- single or double quotes for strings
- a few spacing options
- include or exclude trailing commas in arrays and objects
There are a few more, but only a few.
The rest is, as the 14 year old stereotypical OC-kids say, 'care.'
ESLint for the rest!
There are, of course, more we can do to avoid common pitfalls in our code and pull requests. One of my favorite tools out there right now to do just that is ESLint.
ESLint analyzes your code, and runs a set of "linting rules" against it. There are literally thousands of them though, so you might want to consider using a preset.
AirBnB has created what most people use today, namely
eslint-config-airbnb. This adds
to use a button whenever you want to have some kind of user interaction with an object!
AirBnB's preset comes with tons of formatting rules as well, though. These are great for the most part, but if you'd
like to use Prettier to handle all of your formatting for you, you need a way to disable them. Luckily there is a preset
for that as well, namely
eslint-config-prettier. Add this to
.eslintrc config file, and you're good to go!
That was pretty easy, right?
Look ma! No bugs! Or well, fewer bugs. And better accessibility, faster code reviews and in general much happier developers.