JavaScript: Linter

When different developers write code in different styles, the code becomes hard to read: an extra space here, different indentation there. To avoid such disagreements, programmers agreed to follow a single coding style. This set of rules describes how code should look: spacing, how functions are formatted, and variable naming.

A single style means code that is equally clear to all team members, regardless of who wrote it. This saves time, reduces the number of errors, and makes collaboration easier.

Coding standards

The JavaScript ecosystem has no single official standard, but there are widely adopted guides, for example the one from AirBnb. They describe in detail how to format code: which indentation to use, how to place spaces, how long lines should be, how to name variables, and much more.

These rules are known and used by JavaScript developers. It is useful for beginners to look into them from time to time and develop good habits from the very start. However, there is no need to memorize everything at once.

Linters: automatic code checking

There is no need to memorize all the rules by hand. There are special programs that do this for you. They are called linters.

A linter is a tool that analyzes your code and reports violations of standards. It helps you:

• Get rid of extra spaces
• Keep consistent indentation
• Write readable and clean expressions

A modern linter: Biome

Today, one of the fastest and most popular linters for JavaScript is Biome. It combines a linter and a formatter in a single tool, works fast, and is actively developed.

Let's look at an example:

const result = 1+ 3;

This code looks messy, and the linter will rightly point out the error. Here is what the checking process looks like:

Code                Linter            Result
┌──────────────┐    ┌──────────┐    ┌─────────────────────────┐
│ const result │ →  │  Biome   │ →  │ lint/style/noShoutyConst│
│   = 1+ 3     │    │          │    │ missing whitespace       │
└──────────────┘    └──────────┘    └─────────────────────────┘

This means there are missing spaces before and after +. According to the standard, it should look like this:

const result = 1 + 3;

Rules and their meaning

Each linter message is tied to a specific rule. For example, some rules deal with spaces around operators, others with blank lines between code blocks, and still others with line length. When you are just starting out, such small things may seem unimportant. But over time it becomes clear that they are exactly what forms a single readable style.

You can find the full list of Biome rules in the official documentation.

Using a linter in your own projects

Once you start writing your own projects beyond the learning platform, a linter will be an indispensable helper. It can be set up in any code editor, run in the terminal, or integrated into the project build. The linter shows errors and can fix them automatically.

You received some code from a colleague — it works correctly, but it violates the formatting standard. Fix the spaces around the operators without changing the logic:

console.log(    (5  **2)-(3*  7));

The result must stay 4.