Lint, linter, linting? What is it and why you should use it? I’ll try to show you how Atom linter packages could save you a lot of development time.
Linter is a program which analyses your code during coding process.
Imagine yourself working on a new
That’s where linter could help you save precious time.
linter works while you’re typing and checks if there are any syntax errors. Let’s look at example from previous section. If you forget to put semicolon at the end of a line, linter will immediately show you the error. It will save you a lot of time. Not only that, it will force you to write code more carefully.
You could use linter inside Atom. Go ahead and install it from Atom package manager. After that, open linter package settings. There are plenty of options. I encourage you to take your time to understand each one them.
The most important options are:
- Lint As You Type - turn on
- Highlight Error Lines in Gutter - turn on
- Show Inline Error Tooltips - turn on
- Display Linter Info in the Status Bar - turn on
- Display Linter Status Info in Status Bar - turn on
This settings should turn on linter errors in Atom, so you could fix the problems more easily.
You can see full configuration of my linter package here:
Basic linter is installed and configured, now we need actual linter plugins for specific programming languages. There are many plugins available, full list is available here. Because I’m a frontend developer, I’ll show you how to install linters for
One of the most popular
jshint node script. Here are my settings:
linter-stylelint is an interface for stylelint, CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. It is available on Atom package manager and it has only 3 configuration options. Here you can see my linter-stylelint configuration:
To see linter-jshint in action, open any
You could see
CSS lint errors by opening and
In the examples above you could see that errors are displayed on 4 different places:
- in a status bar,
- in a gutter,
- as a status info and
- in a minimap.
This depends on your main linter settings, but you should see at least on of them.
You could use more advanced configuration options for each linters which are out of scope for this article. I encourage you to read full documentation for both stylelint and jshint, as they could be really useful for you.
Linters are very useful and simple solution for basic syntax checking. Linters will not only save you time, but will also make you write better code.
Are you using linters? Which one are your favorite?