ESLint, Husky, and VSCode Configuration for Angular Project

Proper code formatting and styling is the basic core principle of any good project. Every developer has their own coding style depends on how they format the space in between code, how they name their variables, and so on. As the number of developers increases in a project and if they all have their own coding style then managing and maintaining the project would be very difficult. So, here comes the role of ESlint which defines particular rules and boundaries for our code structure.

Previously in Angular, there used to be a default TSLint file that is deprecated. We will use Eslint that is being used for both javascript and also for typescript. In this Article, we are going to add ESLint, Husky, and also configuring VSCode according to it in our Angular project. Github repository(https://github.com/dishubagga/Eslint-and-Husky)

Adding Eslint into Angular Project

To install Eslint you need to execute the command “npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin” which will add the ESlint configurations into your project.

To translate the TSlint to ESlint execute the command “npx tslint-to-eslint-config”. It will create the new files “.eslintrc.js” and “tslint-to-eslint-config.log”.

Now, we need to install dependencies by executing command:

“npm install eslint-plugin-import@latest eslint-plugin-jsdoc@latest @angular-eslint/eslint-plugin@latest @angular-eslint/eslint-plugin-template@latest eslint-plugin-prefer-arrow@latest @typescript-eslint/eslint-plugin-tslint@latest --save-dev”.

Some of the rules that we don’t need we will remove from .eslintrc.js file @angular-eslint/template/banana-in-box and @angular-eslint/template/no-negated-async as these rules are for html pages, we will remove these two rules and add “ “ignorePatterns”: [“ **/*.spec.ts”, “.eslintrc.js”] ” which are for test files and .eslintrc.js file and turn off “jsdoc/check-indentation”.

In the script of package.json add “ “lint”: “eslint -c .eslintrc.js — ext .ts ./src” ”

Now, If we run “npm run lint” we see there are a lot of errors in our console and if we run “npm run lint — fix” it will fix all errors.

we can remove the tslint.json file and remove TSlint related rules in .eslintrc.js and execute npm uninstall tslint.

VSCode configuration

In our .eslintrc.js file we can see that we have set our indent space to 4 and in our VScode we have 2 spaces. In order to change this, we can change 4 to 2 in .eslintrc.js.

If we want to change the VScode indentation to 4 we can go to file .editorconfig and change indent_size = 4.

Install ESlint extension in VSCode.

To make ESlint work with VScode we need to create a task by pressing cmd+shift+p select Tasks: Configure Task and select npm: lint.

It will create a .vscode folder inside which there will be tasks.json. In tasks.json in problemMatcher add “ $eslint-stylish”.

Now, we can able to see that if we miss a semicolon it will show us the error from ESLint.

We can manually resolve the errors by formatting them individually. But, we can make VSCode automatically formatting them according to the ESlint rules when we save our file.

Go to settings and enable format on save.

After that changing the default formatter by going to settings search default formatter and change it to ESlint and your VSCode is ready.

Now, if the semicolon is missing and you save the file it will automatically add the semicolon.

Husky

Husky provides githooks like pre-commit, post-commit, and many more options to make sure that there is no bad commit in GitHub. In the file pre-commit and we write our commands for example “npm run lint” and “npm test — watch” to make sure that ESLint and the test case pass before committing it into the repository.

Applaud and follow me if you like this article!