DEV Community

Spencer Lepine
Spencer Lepine

Posted on

Git Project Configuration With Husky and ESLint

#linter #husky #workflow

Blog Post Thumbnail

Working on a project with Git and GitHub is relatively simple. When a project starts to grow however, it is crucial to write clean code that other developers can read. Follow this article to learn how to set up linting and pre-commit hooks for your repository.

Let’s walk through the steps for a one-time setup to configure husky pre-commit and pre-push hooks, ESLint with code styles conventions, prettier code formatter, and lint-staged. Husky automatically runs a script on each commit or push. This is useful for linting files to enforce code styles that keeps the entire code base following conventions.

Walkthrough

Install the dependencies:

npm install husky@4.3.8 lint-staged@10.5.4 prettier@2.8.8 --save-dev
Enter fullscreen mode Exit fullscreen mode 
yarn add husky@4.3.8 lint-staged@10.5.4 prettier@2.8.8 --dev
Enter fullscreen mode Exit fullscreen mode

Package.json Updates

Add the following to your package.json to configure all three packages:

{
  "name": "@spencer/example-package",
  // ...
  "scripts": {
    "format": "prettier --write ."
  },
  "prettier": {
    "printWidth": 180,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "proseWrap": "always",
    "requirePragma": false,
    "insertPragma": false,
    "endOfLine": "lf",
    "jsxBracketSameLine": true
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.(js|jsx|ts|tsx|json|css|md)": [
      "prettier --write"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Configure ESLint (optional)

First, install this package

npm install eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Then, run npm init @eslint/config to create a config file and choose preferred code styles.

Alternatively, use this example file. In the root directory, create .eslintrc:

{
  "extends": [
    "eslint:recommended"
  ],
  "plugins": [
    "prettier"
  ],
   "parserOptions": {
    "ecmaVersion": 2017
  },
  "env": {
    "es6": true
  },
  "rules": {
    "no-console": "off",
    "no-unused-vars": "off",
    "react/prop-types": "off",
    "quotes": [
      2,
      "double",
      {
        "avoidEscape": true
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Everything in action

After making changes, commit the files, and see lint-staged automatically run, triggered by the pre-commit hook.

my-project$ git commit -m 'example commit message'
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
[example-branch 4bc4030] add new husky setup
 4 files changed, 59 insertions(+), 44 deletions(-)
Enter fullscreen mode Exit fullscreen mode

All files have been linted and automatically fixed with prettier, or denied if too many errors were thrown. Now we can push the "clean" code.

my-project$ git push origin example-branch
# npx lint-staged
# ... (no errors found)
# npm test
# ... (PASS)
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 375 bytes | 375.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/spencerlepine/my-project.git
   4bc4030..b558038  example-branch -> example-branch
Enter fullscreen mode Exit fullscreen mode

Boilerplate

See a working example here: GitHub repository.

Notes

A useful trick is the -–no-verify flag to SKIP the pre-commit or pre-push hook.
Use this option to skip the husky script in case you force a commit/push.

my-project$ git push origin my-branch --no-verify
# husky will not run "npm test"
... pushing to GitHub
Enter fullscreen mode Exit fullscreen mode

When husky released v7, it had some major changes to the configuration. There are many articles and Stack Overflow answers about husky, but some of them are misleading if they were using v4.

Hope this article helped! Interested in more, check out more articles here.

Follow my journey or connect with me here:

Top comments (0)

Read next

wittedtech-by-harshit profile image

Custom Hooks in React: A Guide to Creation and Usage

Harshit Singh -

taiwo17 profile image

JavaScript's BEST KEPT SECRET is the Power of forEach Functions

Taiwo Shobo -

aktran321 profile image

SSRF Attack

Khang Tran -

hosseinmobarakian profile image

Using Map, Filter, and Reduce Effectively in JavaScript🔥

Hossein Mobarakian -