Compare the Top 3 Style Guides and Set Them Up With ESLint
Standard vs. Google vs. Airbnb
There are many articles on the internet that will teach you how to set up a specific ESLint style guide; this article will explain how to set up ESLint when working with React, as well as compare the Airbnb, Standard, and Google style guides.
Setting Up ESLint
Note: This guide is assuming you want to install ESLint locally (the recommended setup). If you want to set ESLint up globally, make sure to use yarn global.
As per the ESLint Setup Docs, a prerequisite dependency of ESLint is Node.js (8.10.0, ^10.13.0, or >=11.10.1) built with SSL support.
To install ESLint you can run:
yarn add eslint --devThen, configure ESLint with:
yarn eslint --initA prompt will come up and ask you some configuration questions, the answers to these questions are dependent on your project situation.
For the first question, it is important to select the third option so that you can actually enforce a code style.
Another one of the questions is which style guide you want to enforce. When writing this article, the current options given are the Airbnb, Standard, and Google style guides.
Deciding which style guide you want to use may be a bit daunting and a knee jerk reaction might be to just pick the brand you like the most.
As I will explain below, the brand you like the most is the last thing you should think about when deciding on a style guide.
Comparing Style Guides
As I said, deciding on a style guide isn’t just a matter of picking the brand name you like the most. There’s more thought that needs to go into choosing a style guide.
For example, if you’re developing a React application, then Google’s style guide isn’t the best option considering it doesn’t support React. If you love your semicolons, Standard is not a viable choice because it removes them.
I think you get the point, there’s more to style guide than the brand tied to it.
Before comparing the differences, all of the style guides enforce these rules:
- Tabs (indent): Two-spaces.
- Quotes (quotes): Single.
- Brace style for control blocks (brace-style): Same line.
- Prefer
const/letovervar(no-var): True. - No trailing spaces (no-trailing-spaces): True.
- Array bracket spacing (array-bracket-spacing): No spaces.
Note: This table compares rules unique to the rule sets, not rules that come with ESLint-recommended.
Below are some differences between them:
These rules are just some of the multitude of rules that these rule sets enforce. There are more than one hundred rules that a style guide could enforce and some rules are enforced by all three while some are uniquely enforced. It all depends on what you want.
It is also important to remember that if you have found a style guide that you like, but it enforces a rule you’d rather it didn’t or it doesn’t enforce a rule you’d prefer it did, you can always fine-tune it by making specific rules in the eslintrc.
To enable a style guide, you can either re-init ESLint (for the last option I would suggest not installing with npm. Instead, I would manually add the dependency with Yarn) or instead of re-initing, you can just manually add the dependency and then edit eslintrc:
Standard
yarn add eslint-config-standard --dev“extends”: [“eslint:recommended”, “standard”]
yarn add eslint-config-google --dev“extends”: [“eslint:recommended”, “google”]
Airbnb
yarn add eslint-config-standard --dev“extends”: [“eslint:recommended”, “airbnb”]
Conclusion
What matters most is choosing a style guide that fits your needs. If you’d rather not think too much about it, Airbnb’s style guide is generally considered the best option for React development.
Feel free to leave a comment if you have any questions, suggestions, or anything else!
