Installing and using ESLint on your existing JavaScript code
Why linting? 🤔
Javascript is a great language, However, since it is flexible, there is a possibility of writing bad codes and to dig yourself into a hole. Javascript is a dynamic language and it’s loosely typed, which means that there’s a lot that can go wrong, so ESLint is very helpful as it analyses your code without executing it.
ESLint is a code quality tool whose job is to scan your project files and point out potential issues. The issues can be non-critical, such as formatting, or critical, such as trying to reference a function that does not exist.
Now, ESLint is not alone in this space, there are other tools like JSHint and JSLint. All of these tools try to solve the same problem, but in recent years, the community has started moving towards ESLint. This is because ESLint has been better at keeping up with the latest features from ES6 and ES7 while the other tools don’t have as great integrations so the community has started to shift away from them.
Installing & Setting up🎯
There are two ways by which you can install ESLint; globally or in your particular project. It’s easier to do it globally, but on the official webpage for ESLint, they recommend not to install it globally and that you should install it locally in each project and the main reason for this is that it makes it easier to collaborate with other developers on individual projects and have different rules(rules are the style conventions that you apply to the code). ESLint is a package, which we install using NPM.
For this tutorial, I’m using my existing project repository as a sample repository. The master branch will have the original code and I’ll use “linted” branch to install and lint code using ESLint. I’m assuming that you already have git and node installed on your system. I have cloned the repository on my system and switched the branch to “linted”.
Let’s install ESlint and save it as a developer dependency. We use ESLint as a developer dependency because the code of your project does not depend on the ESLint instead you want to use it while you’re developing your project and when you release the project it won’t need the ESLint.
npm install eslint --save-dev Once the installation is finished, open the package.json file and you will see the updated entry of ESLint under “devDependencies”.
Now, comes the interesting part, which is setting up ESLint before we can actually start using it to find and fix linting errors. We’re going to do this by setting up a configuration file. The process is going to step through a series of questions or preferences and at the end, it will create a configuration file called .eslintrc.{js,yml,json}.
Since we have already ESLint hosted on our registry, we will use npx (recommended to those using NPM version 5.2.0 or above) or else you can use ./node_modules/.bin/eslint
To initialize a configuration, run:
npx eslint --initOr./node_modules/.bin/eslint --init
The ESlint CLI wizard will show up and ask us how do we like to configure it. You can choose different options according to your preferences. I want to use ESLint to check syntax, find problems, and enforce code style.
I have used the javascript modules in my project so I’ll select the first option. (If your project has babel installed then you definitely need to choose this option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need to choose this option.)
I haven’t used any of these frameworks in my project so I’ll select none of these.
I didn’t use TypeScript in my project so I’ll select No!
My project is node-based so I’ll choose the second option.
Now, we’ll see the options to define the style for our project’s code. I will choose the first option that will list the styles created by popular companies like Airbnb and Google. Choosing the second option will lead you to a series of questions that will define your own custom style definitions. Or you can choose the last option to inspect a javascript file from another project and adopt the same rules in your project.
I will select the Airbnb style guide which is one of the popular style guides.
The final step is to select the format that you want for your .eslintrc file. I chose the javascript format.
After selecting your desired file format the wizard will ask whether you want to install Airbnb dependency with NPM or not? Simply, click on ‘Yes,’ and then ESlint will kick in and install all the necessary dependencies and will generate an .eslintrc.js configuration file.
We’re done with installing ESLint and setting up the configuration file.
Running ESLint
a. Checking syntax & finding problems
You can check syntax and errors on either a single file or all the files in a directory.
To check on a single file, just run:
npx eslint filename.js And to check on multiple files in a directory you’ll need to specify a pattern like public/**/*.js and then ESLint will look for errors in all the files that are inside public directory as well as the subdirectories, the command will be :
npx eslint public/**/*.jsThe screenshot below shows the list of linting errors and warnings thrown by ESLint when I run it on the single file using:
npx eslint server.js
b. Fixing problems & enforcing style
We used the ESLint to find the errors and warnings in our code and now we want to fix those errors using ESLint but before doing that here’s a screenshot below that shows my code looks before I use ESLint to fix the errors.
Let’s run the command to fix the errors and enforce the Airbnb style guide using ESLint:
npx eslint server.js --fixCool! ESLint fixed 82 errors but still, we have that 1 warning and that is because it’s considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client.
So, to fix this warning we’ll have to change the rule in ESLint configuration file.eslintrc.js . I’ll add a new rule 'no-console': 0, to my ESlint configuration file that will allow all the console statements and will not throw the warning. Adding this rule to our configuration file will allow console statements throughout the project and will not throw any error. If you explicitly want to allow a single console statement then you can add the comment:
on the current line:
console.log(someThing); /* eslint-disable-line no-console */… or on the previous line:
/* eslint-disable-next-line no-console */
console.log(someThing);
After adding this rule to our configuration file we will again run the ESLint to check for the warnings/errors and Voila!! No errors and warnings!🤩
The code looks way clean than it was before using ESLint.
Setting up rules for ESLINT in your project
Defining rules for ESLINT in your project to inform ESLint the kind of rules you want to add or remove. you can modify/set your rules in the rules section in the configuration file. You can define as many rules as possible, you can read more on ESLINT rules on their official documentation ESLINT Rules Documentation.
Bonus: You can link ESLint to your javascript project compiler:
- Goto your
package.jsonfile, in the script segment in your file, add the following
script:{
"lint":"eslint"
}Note: “lint” is just an ordinary word, you can use any word you are comfortable with
- In the root project, you can run your linting script with
npm run lintESLINT helps to increase productivity, write your code according to standard and flag errors when your code base is breaking style guide rules. With this post you should be able to integrate ESLINT in your Javascript project.
