Using Linters

Posted on Sat, 04 Feb 2017 12:30:36 GMT

Tools

What is a linter? #

According to google, the definition of "lint" is "short, fine fibres which separate from the surface of cloth or yarn during processing."

However for us programmers a linter is a software that checks your code for errors, bad practices, bad formatting and logical issues, and gives you a warning when you make a mistake. A linter can be configurable according to rules that you decide.

Why use a linter? #

Well, there are quite a few reasons:

to write better code
to write good code more easily
to learn a programming language
to write code aesthetically consistent
to follow conventions
to share code within a team without losing your mind

Let me double stress the fact that linters are especially important if you work in a team (meaning not alone), because by following some rules you can make sure that your code looks the same regardless of who's writing the code.

And finally, let me triple stress that linters are super good to learn how to code as they point out issues while you type (I especially find JavaScript linters useful for this reason).

How does a linter look like? #

A (JavaScript) linter looks like this (screenshot courtesy of Visual Studio Code by Microsoft). Please notice the warning in the lower part of the screen. By clicking on the error there, you can get to the line containing the issue.
The error position is also specified within parenthesis, in this case it is 7,12 (line 7, char 12).

While a sass linter looks like this (screenshot courtesy of Stack Overflow)

How to use a linter? #

Depending on your tool of choice, there are different ways to install and use a linter. To have a working linter for JavaScript and Sass, you need to:

Install Node on your machine if you haven't already.
Install the linters globally using the node package manager (aka NPM)
- to install ESlint (the JavaScript linter): npm install -g eslint
- to install Sass lint: npm install -g sass-lint
Install the linter plugin in your editing software
- In Visual Studio Code, here is the ESlint package, and here is Sass Lint Package
- In Atom, here is the ESlint package, and here the Sass Lint Package
- In Sublime Text, here is ESlint and here is Sass lint.
Create a linting configuration file for each language you need to lint
Restart your code editor just to be safe.

Wait, what are these linting configuration files? #

Linters need configuration files in order to give instructions to our linters about how we want the linter to behave. To get started, you can use some default linter configurations, and when you grow more accustomed to their usage you can change these defaults. You have to place these config files in the root of your project for it to be recognised by the code editor.

How to create a linter configuration file? #

ESlint #

Go to your project folder using your Terminal, and type:

eslint


This will start a little program that will ask you a few questions. The first question you get is the following, just press enter to proceed.

 
Eslint wants answers

Then you'll be asked a bunch of additional question, choose whatever you want:

 
More eslint questions

This will create a .eslintrc.json file which will look like this:

 
.eslintrc.json

That's it, you got a working ESlint configuration.
Sass lint #
You can find a sample configuration file here on the official repository. Download the file and add it to your root.
More linters #
Linters are available for any coding language, and the installation steps are similar to these ones, although almost certainly slightly different.
Good luck!