What is JS Style Guide?
A style guide instructs a programmer on how to use a specific programming language. Programming style guides are made up of rules and recommendations. With very few exceptions, rules are enforced across the whole IT organisation. The rules define what constitutes good and improper programming behaviour.
What is the purpose of the Google style guide?
This style guide provides editorial principles for authoring Google-related developer documentation that is clear and consistent. Start with Highlights, Voice and Tone, and a Text-formatting Summary if you’re new to the book and want to learn more about our style.
What is linting and how can it save you time?
Time is one of the most difficult aspects of software development. We won’t be able to get more of it, but linting can help us make the most of the time we do have.
So what is linting?
lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.
Simply put, a linter is a tool that programmatically scans your code with the goal of finding issues that can lead to bugs or inconsistencies with code health and style. Some can even help fix them for you!
Take for instance, the following example:
const test='I am a test';
console.log(`Test: ${test}`);
const test = 'Another one.';
We’re declaring the constant test twice, which our javascript engine won’t be happy about. With the proper linter settings and watch configuration, instead of getting caught later as an error when the code runs, you’ll immediately get an error through your linter running in the background:
Error: Identifier ‘test’ has already been declared
const test = 'I am a test';
console.log(`Test: ${2}`);> 10
const test = 'Another one.';
It might be pretty obvious that you have 2 of the same const declarations given this is only 3 lines, but in a more complex application, this can save tons of time having to hunt down a pesky bug that’s not always obvious.
Basic Lint Tools
Lint tools are the most basic form of static analysis. Using lint tools can be helpful for identifying common errors, such as:
- Indexing beyond arrays.
- Dereferencing null pointers.
- (Potentially) dangerous data type combinations.
- Unreachable code.
- Non-portable constructs.
Pros/Cons
Here are some key pros and cons to code linting.
Pro: Lint checks many things, including syntax errors and structural problems.
Con: Lint can produce as many errors and warnings as there are lines of source code. This leads to high false positive and false negative rates.
Pro: Lint checks against best practice and code style guideline violations.
Con: Lint programming identifies violations of best practices. But it doesn’t teach people best coding practices. Developers can use Lint to improve their code, but they might not be able to replicate the best practice.
Pro: Lint is inexpensive.
Con: You get what you pay for. Lint is inexpensive, but it can rack up costs in developer productivity.
What are linting options available?
There are many types of lint tools available, based on your programming language. These include PC-Lint, Pylint, and JSLint.
If we are developing a React application, then Google’s style guide isn’t the best option considering it doesn’t support React. If there is semicolons, Standard is not a viable choice because it removes them.
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/let over var (no-var): True.
- No trailing spaces (no-trailing-spaces): True.
- Array bracket spacing (array-bracket-spacing): No spaces.
For more comparison
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:
yarn add eslint-config-standard --dev“extends”: [“eslint:recommended”, “standard”]
yarn add eslint-config-google --dev“extends”: [“eslint:recommended”, “google”]
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.
