Linter is a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs. It is used in Javascript/Typescript projects mainly to identify stylistic errors and coding patterns errors that are frowned upon by the community.

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 NodeJS.

Setting up eslint

As eslint is not used as a development library, we need to install it as a dev dependency first.

This will install the latest version of eslint in the current project. Then you need to initialize it.

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.

1. 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.

2. JavaScript modules (import/export)

Select either Javascript or 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”.

3. Which framework does your project use?

If you are using React or VueJS, select the appropriate option. Otherwise go with “None of these”.

4. Does your project use TypeScript?

If you are using Typescript, select Yes, otherwise No.

5. 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.

6. How would you like to define a style for your project?

Select the 1st option which is “Use a popular style guide”.

7. Which style guide do you want to follow?

Select the 3rd option which is "Google: https://github.com/google/eslint-config-google".

8. What format do you want your config file to be in?

Select JSON as most of the articles that you will find in the internet are using it.

9. 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 package.json.

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.

Setting up git hooks

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.

Then add the following lines to your package.json.

In the lint-staged section, change “*.js” to “*.ts” for Typescript projects.

Setting up Webstorm

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.

{% img mx-800 https://i.ibb.co/Mf8LnBC/image.png ‘“Select NodeJS interpreter” “Select NodeJS interpreter”’ %}

Then goto Javscript -> Code Quality Tools -> ESLint and select the interpreter as Project and ESLint package as the following.

{% img mx-800 https://i.ibb.co/yR1cK1Z/image.png ‘“ESLint configurations” “ESLint configurations”’ %}

Both Javascript and 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.

{% img mx-800 https://i.ibb.co/gdtdT89/image.png ‘“Turn off TSLint” “Turn off TSLint”’ %}

Conclusion

ESLint is a very popular linter for identifying and reporting on patterns found in JavaScript code, with the goal of making code more consistent and avoiding bugs. You can find more about this package in its official documentation. You can find all the lint rules here with some explanation of its importance, sample codes and ways to fix the issues.

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 !!

‍