In this article I will show how to install
eslint, a very popular linter for npm based projects, and setup git hooks so that no one can commit to the project with lint errors. You will learn how to set up
eslint for browser based applications like
ReactJS and backend applications like
eslint is not used as a development library, we need to install it as a dev dependency first.
npm i -D eslint
This will install the latest version of
eslint in the current project. Then you need to initialize it.
npx eslint --init
Then it will ask for some questions and you have to select answers according to your need. You can move between options with up and down arrow keys, press enter to select. You have to press space bar to select options in multiple choice questions. I will go through each of the questions.
- How would you like to use ESLint?
Select the 3rd option which is “To check syntax, find problems, and enforce code style” and press enter to move to the next question.
CommonJS. If you have been using both of these methods in your code, you will have to stick with one method. Do not select the last option which is “None of these”.
- Which framework does your project use?
If you are using
VueJS, select the appropriate option. Otherwise go with “None of these”.
- Does your project use TypeScript?
If you are using
Typescript, select Yes, otherwise No.
- Where does your code run?
If you are using
ReactJS select Browser and unselect Node with space bar. For
NodeJS backend projects select only Node and unselect Browser.
If you are coding both backend and front end in the same repository, select both and press enter.
- How would you like to define a style for your project?
Select the 1st option which is “Use a popular style guide”.
- Which style guide do you want to follow?
Select the 3rd option which is “Google: https://github.com/google/eslint-config-google”.
- What format do you want your config file to be in?
JSON as most of the articles that you will find in the internet are using it.
- Would you like to install them now with npm?
Select YES to install the other required dev dependencies.
Now setting up
ESLint is over. Now you need to add scripts to
The first script will identify problems in your code and tell you the line numbers. You can search the error message on the internet and find out tons of articles on why that lint rule is important and how to fix it. For simple lint problems, you can just run the second command and fix them.
As I said earlier, you can set up git hooks to protect the repository from bad commits with lint errors. First you will have to install the following dependencies.
npm i -D husky lint-staged
Then add the following lines to your
lint-staged section, change “*.js” to “*.ts” for
If you are using Webstorm as your IDE, you can tell it to give errors in the IDE by looking at the ESLint settings you are using. Then you can identify and fix the problems while coding without running
npm run lint script.
Goto Settings -> Languages and Frameworks -> Node.js and NPM section. Then select the Node interpreter that you are using. Check coding assistance for Node.js for backend projects.
Then goto Javscript -> Code Quality Tools -> ESLint and select the interpreter as Project and ESLint package as the following.
Typescript users should turn off TSLint in the IDE as it is deprecated.
Typescript users should use ESLint by configuring it for
Typescript in the set up process.
In this article, I tried to explain setting up ESLint, git hooks and Webstorm IDE with lint configurations provided by Google. I hope this made your life easier. Please share your thoughts and ideas.
Happy coding !!