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:
npm install -g eslint
I have installed it in my laptop, so it would be very quick.
Now we have a demo directory named
eslintDemo here. In the directory we have only one 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.
First we need to initialize eslint.
We change directory to the
eslintDemo folder, and then call:
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.
We can check our file now. We go back to terminal, and input a simple command:
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:
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.
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.
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,
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
Here I add a inline comment:
/* eslint no-console: "off" */
No errors now.
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.