ESLint Basic Usage

A simple demo presentation

Posted by Donggu Ho on 2017-04-13

Installation

Because ESLint is delivered via NPM, the Node.js Package Manager, so before installation, you need to ensure you have installed Node.js and configure a global variable of it.

Then we open our command line and install eslint globally, these operations are all the same in different Operating Systems:

1
npm install -g eslint

I have installed it in my laptop, so it would be very quick.

First Touch

Now we have a demo directory named eslintDemo here. In the directory we have only one file demo, which is a JavaScript file.

And we open it, there is a very simple function and a function call here. Obviously there is no syntax error here. Let’s run it.(run)
You see it output the correct message in the console.

And now we would like to check it with ESLint.

init

First we need to initialize eslint.
We change directory to the eslintDemo folder, and then call:

1
eslint --init

We have 3 different ways to configure our linting rules, here we choose the first one.

With this option, ESLint will ask us 11 questions about our JS coding style, then it will automatically generate a configuration for us.

(answer and finish)

So now we can see we have a new file in our directory called .eslintrc. Here is rules that eslint init for us.

We will see it later.

check

We can check our file now. We go back to terminal, and input a simple command:

1
eslint demo.js

Wow then we can see we have some errors in our syntax. Because I have set semi, so these lines got error.

Remember ESList can autofix some error? Let try:

1
eslint --fix demo.js

Okay we have only one error now. ESLint add semicoloms for us. But eslint don’t know how to fix no-console problem, so it keeps error.

Visualization

As we have mentioned before, ESLint is integrated with various of editors, and of course Atom.

I have installed a ESLint pluggin in my atom, and now I enable it.

Then you can see the error more sufficiently and don’t need to save and run everytime.

configure

Actually I insist to use the console command, so I need to modify the rule.

Now we go to the .eslintrc.json file, here we can see it extends eslint:recommanded, this is a default rule come with eslint, we can’t use console command because this rule prehibit it.

Now I go to turn off the rule, very simple operation. I add a rule here,

1
"no-console": "off"

Now I check again. No output. I win.

But sometimes I hope that the console command is only enanbled in this file specifically, instead of the whole project directory. Then I can use inspect Javascript configuration, that is, we configure eslint rules in our JS files.

Here I add a inline comment:

1
/* eslint no-console: "off" */

No errors now.

Webpack

These is a basic usage of ESLint, and when it come to pratice, we use some Build Tools to construct our project, for example Webpack, and we may use some existing eslint-config, which is stricter.

Here is one of my Webpack front-end project, and I use a standard eslint config.

(show)