linter.md

Setting up linters

Pre requisites

• npm & node are installed. Guide
• atom or sublime or vsc. Which editor to choose

Basic setup

To setup a new project.

npm init

Outcome: You should have a package.json in your project's root dir. run ls -a to see the above file.

Create a source code directory. You should always have a separate directory where your hand written code lives in.

mkdir src

This created a src dir inside your project. Now let us create your first file. It is a good habbit to name the entry point of your code as index.

touch src/index.js

You will now have a file inside your src folder. Now let us write some code inside src/index.js file. This code would then be linted.

Eslint setup

We can skip the eslint --init part since we will be using mourner's config.

npm install --save-dev eslint eslint-config-mourner

The above command will install eslint and mourner setting for you.

Now we need an eslint config file.

nano .eslintrc

Should open the editor and now paste the following.

{
  "extends": "mourner"
}

This should tell eslint to validate againnst the rules in mourner config. (To look at the rules mourner defined, click here)

Now, we need a command to lint our src dir. Run the following command inside your project's root.

nano package.json

Find the script tag inside it and add this to under scripts.

"scripts": {
  "lint": "eslint src",
  "lint:fix": "eslint src --fix"
}

This tells linter to lint the src folder. You can change it to whatever folder you like.

To run the linting process, and see all the linting erros in the src dir.

npm run lint

and to fix some fixable errors, use

npm run lint:fix

Editors

You must have sublime package manager for sublime.

Sublime

• Open the Command Palette (cmd+shift+p on Mac OS X, ctrl+shift+p on Linux/Windows).
• Type install and select Package Control: Install Package from the Command Palette. There will be a pause of a few seconds while Package Control finds the available packages.
• When the list of available packages appears, type linter and select SublimeLinter.
• Within Sublime Text, bring up the Command Palette and type install. Among the commands you should see Package Control: Install Package. If that command is not highlighted, use the keyboard or mouse to select it. There will be a pause of a few seconds while Package Control fetches the list of available plugins.
• When the plugin list appears, type eslint. Among the entries you should see SublimeLinter-contrib-eslint. If that entry is not highlighted, use the keyboard or mouse to select it.

Once these two packages are installed, restart sublime and your editor should be linting your code.

Atom

In atom it is fairly simple. Click on the Atom menu on top of your screen. Next click on Install shell commands. This will allow shell command apm for you. Now open your terminal, (new tab preferably) and type

apm install linter

and then

apm install linter-eslint

Restart your editor and you should be good to go.