DEV Community

Cover image for How to integrate Husky, ESLint, Prettier to project in less than 15 minutes (step-by-step guide)
Jakub Smetanka
Jakub Smetanka

Posted on • Updated on

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)
Image description
Image description

2. Install Prettier and pretty-quick

Install packages using npm:

npm install --save-dev prettier pretty-quick
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

.prettierrc

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

The Directory should look as follow:

Image description
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 
Enter fullscreen mode Exit fullscreen mode

Image description
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
Enter fullscreen mode Exit fullscreen mode

3. Install ESLint

For local install of package use:

npm install eslint 
Enter fullscreen mode Exit fullscreen mode

For global install

npm install -g eslint 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

 .\node_modules\.bin\eslint --init 
Enter fullscreen mode Exit fullscreen mode

and for Linux and Mac:

./node_modules/.bin/eslint --init
Enter fullscreen mode Exit fullscreen mode

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

Image description

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": {}
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
    }
Enter fullscreen mode Exit fullscreen mode

5.2 Add prepare script to package.json

"prepare": "cd .. && husky install client/.husky"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

5.4 create hook for pre-commit

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

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

5.5 Result

Image description

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: Buy Me A Coffee
I would be grateful ;)

Follow me on Twitter

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/

Discussion (11)

Collapse
arianacosta profile image
Arian Acosta

Good guide with husky and everything. Alternatively, I also authored the Poetic NPM package that automatically configures eslint, prettier and the airbnb guide for TS, JS and React by running a single command: “npx poetic”.

Collapse
spock123 profile image
Lars Rye Jeppesen

Too bad it's tied to a specific JS framework.

Collapse
arianacosta profile image
Arian Acosta

It’s not. It’s fully customizable and extensible. Anyhow, new PRs are welcome for additional setups 😀

Thread Thread
smetankajakub profile image
Jakub Smetanka Author

sounds good, for me would be interesting setup for Angular

Thread Thread
spock123 profile image
Lars Rye Jeppesen

Cheers mate!
Definitely taking a look. thanks

Collapse
pavelloz profile image
Paweł Kowalski

Alternative title: How to make your commits take 30 seconds instead of 100ms ;-)

Collapse
geminii profile image
Jimmy

Hi @smetankajakub 👋
Just a little error on .prettierignore.json => it's just .prettierignore (not precise the extension)

Otherwise all sound good 👍 🙌

Collapse
smetankajakub profile image
Jakub Smetanka Author

Thanks Jimmy, you are right!

Collapse
fdiskas profile image
Vytenis

Short version mrm prettier eslint lint-staged

Collapse
andrewbaisden profile image
Andrew Baisden

Husky is such a useful extension great guide btw.

Collapse
smetankajakub profile image
Jakub Smetanka Author

Thanks, Andrew