Maybe you heard the word “Linting”, but don’t know what it is exactly. Or, maybe, you feel your Javascript is turning into spaghetti code. In both cases, this article is for you, as we try to address the question “What is Javascript Linting?”. While linting isn’t the cure for all bad things, it is a great help in writing better Javascript. In fact, it is a requirement of any modern project.
What is JavaScript Linting?
A quick definition
In simple terms, JavaScript Linting forces you to follow a specific syntax when writing the code. It is an additional script that checks your code and forces you to modify its syntax. It may do that by warning you with messages in the CLI or even directly modify your file. The linter (that script) checks for several things, like unused variables or curly brackets starting on the next line instead of the same line of the if. All of that is optional. In fact, your code will run just fine even if you don’t follow the guidelines of your linter. To put it more formally:
JavaScript Linting is a way to enforce additional syntax checks on your code. Those checks are not required to write a functional application, but they help you in writing clean and beautiful code.
Some developers may be skeptical at this point. To them, enforcing extra rules means piling up more (unnecessary) work. That may be your case if you come from a different language, like C# or Python. If that’s actually your case, focus particularly on the next section.
Why Linting?
The goal of this article is not simply to address the question “What is Javascript linting?”. We already did that. Instead, we want to advocate for linting in Javascript, showing you all the reasons behind its importance.
The truth is, Javascript is the realm of spaghetti code. Classes are only a recent feature of the language, you can put everything in a single file, you can use a semicolon to divide instructions or new lines – and more. All of that makes a Javascript code a wild habitat for any design pattern. That was completely okay when we used Javascript just as a snippet inside HTML: the codebase was small, and there was no need for a fancy design. However, today we use Javascript for everything and the code base grew. In fact, we can use it even in the backend with Node.js.
In other words, today we use an unstructured language to write structured applications. The structure of our program relies only on our goodwill. If we start to loosen the second, the first will fall apart. The problem is even bigger when you have a team of people on the same project. They all have to follow the same guidelines in writing the code, otherwise it will be impossible to maintain. How to ensure that? You can try to hold weekly meetings, send angry emails, or even rewrite your colleague’s code. None of that will last. You need a better approach.
Linting ensures that a potentially painful language like Javascript remains beautiful over time. It makes your code better, and easier to read and manage. Of course, this is a requirement in any project.
Stick with your team
Since Javascript doesn’t have a lot of rules, the linter adds additional rules for the syntax. For example, you may want to ensure all lines end with a semicolon, or that no line ends with a semicolon. There are several approaches and set of syntax rules, and you can even create your owns. In the end, it doesn’t matter which one you choose. The only thing that matters is that you pick an approach and stick with it on the entire project. Consistency is crucial.
There are some popular styles when it comes to linting, you can read their guidelines by clicking on the links below.
When you configure your linter (the script that does the linting checks), you can often choose between the three or configure your own. Personally, I’ve been using Airbnb for a while because I found it reasonable for my workflow.
ESLint
What is ESLint?
Now that we know “What is Javascript Linting?” we can ask “What is ESLint?”. ESLint is probably the most popular linter in Javascript. It is a script that can check your files and tells you what’s wrong, or even fix some errors on its own. It can even keep watching your files while you are developing so that you have real-time feedback about what’s wrong.
Using ESlint
The final part of this “What is Javascript Linting?” guide focuses on using ESLint to lint your code. You can read more about using ESLint on the official get started, but what we have here will do as well.
First, install it and save the dependency in your development project. You don’t need that in production, because you want to do the checks only when you develop, not when you put the code in production.
npm install eslint --save-devAt this point, you need to configure ESLint with your favorite style. ESLint has a command-line utility that asks you questions to prepare a configuration file. You can run it with this:
./node_modules/.bin/eslint --initNow, you can check your files with this syntax:
./node_modules/.bin/eslint yourfile.jsAnd this is it! You are now ready to write awesome Javascript code.
Wrapping it up
In this article we addressed the important question “What is JavaScript Linting?” and tried to understand why to use it and how to use it with ESLint. In short, Javascript doesn’t have a lot of rules, and this can easily translate into bad coding practices. With linting, you enforce additional rules that would be optional otherwise. By adding more rules, you make your code more consistent, thus easier to read and work on.
I find linting a necessary tool to write good JavaScript code, must-have if you work in a team. What do you think about it? Have it saved your day? Let me know in the comments.
