What is Linting?
Linting is defined as the automated checking of your source code for programmatic and stylistic errors. It is the process of performing static analysis on the source code to flag patterns that might cause errors or other problems.
What can Linting do?
Linting can detect errors in code and detect the errors that can lead to security vulnerabilities.
Linting can detect formatting or styling issues and makes the code more readable and optimized.
Linting makes maintaining the code much more easier.
Overall, Linting increases the quality of the code.
What are Linters?
The term "lint" was derived from the name of the tiny bits of fiber and fluff shed by clothing, as the command should act like a dryer machine lint trap, detecting small errors with big effects.
Today, we use the term "linters" for a class of tools that check code for common bugs and stylistic errors. Most linters are highly configurable so they can enforce the standards of your organization.
Why should you use Linters?
There are 2 main reasons to use a Linter -
To save yourself trouble by avoiding common problems
To enforce a common coding style across a team
Everyone makes mistakes when they’re coding. It’s easy to use the wrong type of bracket, forget a semicolon, or misspell something. Checking your code for these types of errors is the kind of thing that computers excel at. Rather than reviewing your code line by line for common syntax errors, you can tell a computer what types of errors to look for.
Types of Linters
There are tons of Linters available out there, choosing the appropriate and most useful ones will depend on your tech-stack. Primarily, for Front-End Development linters are used in three main domains -
JavaScript
CSS
Formatting
The most popular ones are - ESLint for JavaScript, Prettier for Formatting and Stylelint for CSS.
ESLint
There have been several popular JavaScript linters over the years, but ESLint is the most popular right now. ESLint places a particular emphasis on extensibility, with a very active community for plugins, modules and shared configs.
Stylelint
Stylelint is the most popular linter for CSS. It can even be used to lint CSS in other files, like script elements in HTML and CSS-in-JS. It is modeled heavily on ESLint, following the extensible model.
Prettier
The main focus of Prettier is to take care of code formatting and making the code as readable as possible. Things like code block indentation, preventing nested ternaries, preventing long code lines and unnecessary semicolons are taken care by Prettier. It provides support for many languages like JavaScript, CSS, HTML and Markdown.
How to use a Linter?
There are several options to use a linter, depending on how much control you have over your development environment.
At the most basic level, you can install a linter into your editor. Most linters have plugins for VS Code and other editors. If you add a lint config file to your project, then anyone with the linter installed in their editor will benefit from the shared set of rules.
Ignoring Linter rules
Most linters will allow you to set up an "ignore" file that tells the linter to not pay attention to certain files. Linters also usually include a special comment you can add to disable the linter rules for the next line or section of code. The comment may look something like this -
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
This comment tells Stylelint to disable the “No !important” rule on the next line.
Connect with me on LinkedIn :- Linkedin
Do check out my GitHub for amazing projects :- Github
View my Personal Portfolio :- Aryan's Portfolio
Top comments (6)
Thanks! maybe you could dive deeper in how to configure eslint for a project!
Sure Dusan, I'll post an in-depth article soon!
Great post!
Thanks Thomas!
Insightful!!
Thanks Navya!