Using Linters

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

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
  • 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:


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:


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!