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).

javascript_eslint_warning

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

hd1qq

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:

eslint --init 

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.

screen-shot-2017-02-04-at-13-15-59
Eslint wants answers

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

screen-shot-2017-02-04-at-13-17-29
More eslint questions

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

screen-shot-2017-02-04-at-13-21-14
.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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s