How to integrate Husky, ESLint, Prettier to project in less than 15 minutes (step-by-step guide)

Usage of code formatter increases the readability of code and helps to keep the same style in the whole project. In this article, we will go through one of the most popular linter ESLint, which is intended for Javascript and Typescript. Next, we will set code formatter for HTML and other files called Prettier. When we add to them Husky hooks after that, we will be able to ensure the same code style for each member of the team, or contributor to our project.

NB: You can skip 1. section if you have already installed Prettier and ESLint extensions in VS Code.

1. Add extensions to VSCode (Optional)

In first step add extension to your VSCode (Ctrl + Shift + X)

2. Install Prettier and pretty-quick

Install packages using npm:

npm install --save-dev prettier pretty-quick

2.1 configuration of Prettier - Code formatter

Create 2 files in a directory where you have package.json

.prettierignore.json

package.json
package-lock.json
yarn.lock
dist
node_modules

.prettierrc

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}

The Directory should look as follow:

If you were asking why is needed pretty-quick, now it's time to use it. With pretty-quick you can run formatter on all files (or only staged etc.) using one command.

npx pretty-quick 

We will integrate this tool later together with husky hooks.

NB: If you are using Windows Powershell and have problem run npx command, you have to change execution policy

set-executionpolicy remotesigned

3. Install ESLint

For local install of package use:

npm install eslint 

For global install

npm install -g eslint 

For generating configuration file for ESLint .eslintrc.json you can choose from two options:

3.1. Use VSCode command pallete

Open command pallete in VSCode (Ctrl + Shift + P).
and run ESLint: Create ESLInt configuration. It will directly open a terminal and start a process of configuration.

3.2. Use npm

If you have installed ESLint package globally to generate file use

npm eslint --init

If you have installed your ESLint package locally then you should use slightly different command for (Windows):

 .\node_modules\.bin\eslint --init 

and for Linux and Mac:

./node_modules/.bin/eslint --init

Both approaches come to the same configuration process where you have to answer some questions about linter settings.

After answering all questions, the configuration file is generated and all required packages are installed.

Example of .eslintrc.json if you have the same answers as on previous picture should look similar as follow:

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

5. Husky

Git has a way how to trigger custom scripts when some action occurs i.e commit or push. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.

npm install --save-dev husky

5.1 Add husky hooks to package.json

"husky": {
    "hooks": {
      "pre-commit": "npx pretty-quick --staged ng lint ng test",
      "pre-push": "ng build --aot true"
    }

5.2 Add prepare script to package.json

"prepare": "cd .. && husky install client/.husky"

NB: You have to install husky from root directory where git repository is initialized, that's why I have to change directory before.

5.3 run prepare script

npm run prepare

5.4 create hook for pre-commit

npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"

It will be launched each time after we fire git commit.

5.5 Result

If you like this article, feel free to comment, or share it.

If you want to support me with coffee you can do it here:
I would be grateful ;)

Follow me on Twitter

Visit website smetankajakub.com

Resources

https://typicode.github.io/husky/#/
https://docs.microsoft.com/sk-sk/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1
https://prettier.io/
https://eslint.org/