The ABSOLUTE Beginners Guide to Linting

We have likely all been there at one point. We excitedly install ESLint with the hope it will sort all of our code out and make us infinitely better at writing good, clean JavaScript.

You have heard that you should be linting, but it's one of those things you don't really understand the why or how behind.

We find some instructions online and before you know it, ESLint is installed and ready to play ball. We load our code up and are greeted by a massive sea of red squiggly lines and 1000’s of issues. If you are like me you probably panicked and uninstalled it as quickly as possible never to try again.

The nature of linters is that they need configuring. That can be a daunting task for a beginner and there aren’t that many great resources out there, so I have made a ‘Complete Beginners’ guide to getting set up with the linter and have it pointing out the bigger mistakes of your code.

Lint? WTF?

Linters solve the problem of messy and inconsistent code throughout projects which is often a vital part of the development cycle. The way they do this is defining a set of rules that everyone in a team should follow, but more important, linters help you to follow the best practices and help to prevent potential problems. They flag up with a warning if anything is not right or of concern.

The issue is if you are starting out you don’t often want to see all of the things you could improve on at once, but it would be handy to find the bigger issues that need addressing. Things like syntax issues, accidental global variables etc.

NPM Install

At this point, you should have Node and NPM installed on your system. To double-check run:

node -v
npm -v

This should return version numbers for each. If not then you just need to install Node and NPM.

To get ESLint run this command in your terminal:

npm install -g eslint

This will install ESLint to your system.

Next, swap to the root directory of your project folder that you want to install ESLint in and run the following command:

eslint --init

This should work, however, it has been documented that sometimes this can have some issues. If there are any problems with this, then try the following:

./node_modules/.bin/eslint --init

If all goes well you should be greeted with some text in your terminal asking “How Would you like to configure ESLint?”. Select the following:

Use a popular style guide
Standard
JS

Great! You are all set up and ready to get linting.

Setting Up A Super Basic Config

Now I expect most people who have had issues with linters before would have got this far and then would have lost the plot when they opened their project to find errors all over the place.

This is where the config file comes in to play!

Open up your project in your favourite text editor and you will notice you have a new edition of a .eslintrc.js file in your root directory. Open it up and you should see something like this:

module.exports = {
   "extends": "standard"
};

First thing first, change standard to eslint:recommended.

module.exports = {
   "extends": "eslint:recommended"
};

Awesome. If you peek at your files you will notice there is still a fair amount of errors. This is because we need to set an environment so the linter understands some of the global variables.

module.exports = {
   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true,
     "jquery": true
   },
   "extends": "eslint:recommended",
}

This is set up to recognise ES6 and JQuery syntax as I believe that is likely to be what most people will be using in their starter projects, however, if you are using other frameworks then you can just add them to the ‘env’ section as I have done above.

Lint Away!

And there we have it! A perfect little ESLint config that isn’t going to scream and shout at you every time you do something a little bit wrong.

Obviously, as you improve and your needs change it is just a case of adding extra properties into this file! Simples!