Improving the quality of your code with Airbnb style guide and ESLint

Today I'm here to talk a bit about code quality, and what you can do to improve your own code in an easy way.

How to make your code look dope

There are several characteristics that make code well-written (internationally known as clean code), which can include things like:

• Readability: All well-written code should be easily read by other developers (and even by the person who wrote it). Good indentation, spacing, variables with coherent names, and comments (when necessary) are undoubtedly factors that significantly increase the readability of code.
• Simplicity: While average programmers only care about solving problems, good programmers care about solving problems in the best possible way (read code refactoring). Therefore, quality code always seeks to solve a problem in a simple way and with easy maintenance.
• Maintainability: Building your code without thinking about the future is a huge mistake. Poorly written code is a real pain to maintain. I say this from my own experience... recently I had to update some things in a project I had done when I was starting my career. The result: I practically had to redo it because it was extremely unfeasible to add new features to it.

Given this, it is very common for companies to use so-called style guides because they help a program to obtain these characteristics.

style guide? WTF?

It consists of a document (in our case, it will be a GitHub repository) with a series of rules that a program's code must follow, ranging from indentation, use or non-use of semicolons, import order, among others. The idea is that the code, even if written by a team, gives the impression that it has been written by one person.

In this article, I will explore a little of Airbnb's JavaScript style guide.

Why the Airbnb style guide?

Because they are sponsoring this article...
Just kidding! (but if they want to sponsor me, give me a call)

The truth is that Airbnb is not just any company. In addition to being a giant tech company, they are responsible for things like enzyme, a very famous tool in creating unit tests for React applications. Therefore, they also have their reputation and competence guaranteed in the developer community.

But now talking about their JavaScript style guide, it is one of the most famous in the world, and it is/was a reference for several companies such as Billabong, National Geographic, Reddit, and even React itself. So learning a very solid and recognized worldwide standard like this is a good choice, isn't it?

How the style guide works

You can find the style guide code in the GitHub repo. Important to note that I will not explain all the rules of the guide in this article, my intention here is just to explain how it generally works. Therefore, after reading this article, go to the repository (if you haven't already) and make sure to read some of the rules it contains.

The guide is very simple and intuitive and basically works as follows:

• Explanation of the rule and then a link with its implementation in ESLint (I will talk about ESLint later).
• The reason(s) why it is used (optional, some rules do not have this).
• Shows an example in code, with bad examples and good examples.

Style guide read, now what?

Well, like any type of new learning obtained in programming, to absorb it, you need to practice, practice, and practice.

However, practicing style guide rules is a bit complicated since the compiler won't monitor whether or not you are using a certain code pattern. That's where so-called linters come in.

Linters and ESLint.

In summary, linters are used to monitor code patterns that compilers are not able (or not designed) to monitor. These patterns are configured by the user according to their preferences. In this article, we will be using a linter called ESLint and configuring it to monitor your code according to the rules of Airbnb.

ESLint is a configurable linter that monitors JavaScript and JSX codes. Its operation, in summary, is basically like this:

Notice that ESLint works in real-time, without the need to compile the code to find the "pattern errors" you configure. It is also important to note that ESLint is not part of the standard JavaScript compiler, so just because you used a var instead of const/let, that doesn't mean your program won't work. ESLint's usage is only to alert the user that they are not using a certain pattern.

Installing ESLint

This article does not focus on teaching everything about ESLint; I will only be showing what is necessary for it to run with Airbnb rules. If you want to deeply understand how ESLint works, I recommend you to take a look at their official docs.

Going back to what matters, first we need to install the ESLint plugin. You can any package manager you prefer, but in this article I'll be defaulting to npm. Simply type the following command in your terminal:

npm install -g eslint 

After that, to integrate ESLint into your text editor, just install its respective plugin:

• VSCode
• Sublime Text

And voilà, your ESLint is now installed!

Installing Airbnb Configurations

Fortunately, we have packages that do practically everything for us, they are eslint-config-airbnb (with JavaScript + JSX/React rules) and eslint-config-airbnb-base (only JavaScript). Here, I will show you how to install eslint-config-airbnb, as it works for both cases.

First, it is necessary to install the base packages, but their versions must be compatible with each other, so you will need to run the following command (for npm version 5+):

npx install-peerdeps --dev eslint-config-airbnb 

Now you need to tell ESLint that you want to use Airbnb rules in your project. To do this, go to the root directory of your project and create a file called .eslintrc, then add the following to it:

{
  "extends": "airbnb"
}

That will make ESLint load all the style guide rules from Airbnb into your project.

ps: If you use any imported JS plugin through a CDN (such as jQuery or axios), you will need to let ESLint know that you are using it, otherwise it will show an error. To do this, just leave your .eslintrc as follows:

{
  "extends": "airbnb",
  "env": {
    "jQuery": true
  }
}

And that's it! You can now start programming your project using one of the most famous style guides in the world.

The end

Thank you so much for reading my article, hope you've learn something new today. Feel free to follow me on my social medias:

See you next time, bye ;)