Husky commit msg hook exited with code 1 error

git commit -m «feat: testing the commitlint library»
@commitlint/cli@16.2.3 — Lint your commit messages

[input] reads from stdin if —edit, —env, —from and —to are omitted

Options:
  -c, --color          toggle colored output           [boolean] [default: true]
  -g, --config         path to the config file                          [string]
      --print-config   print resolved config          [boolean] [default: false]
  -d, --cwd            directory to execute in
                                         [string] [default: (Working Directory)]
  -e, --edit           read last commit message from the specified file or      
                       fallbacks to ./.git/COMMIT_EDITMSG               [string]
  -E, --env            check message in the file at path given by environment   
                       variable value                                   [string]
  -x, --extends        array of shareable configurations to extend       [array]
  -H, --help-url       help url in error message                        [string]
  -f, --from           lower end of the commit range to lint; applies if        
                       edit=false                                       [string]
  -o, --format         output format of the results                     [string]
  -p, --parser-preset  configuration preset to use for
                       conventional-commits-parser                      [string]
  -q, --quiet          toggle console output          [boolean] [default: false]
  -t, --to             upper end of the commit range to lint; applies if
                       edit=false                                       [string]
  -V, --verbose        enable verbose output for reports without problems
                                                                       [boolean]
  -v, --version        display version information                     [boolean]
  -h, --help           Show help                                       [boolean]

Unknown argument: edit
husky - commit-msg hook exited with code 1 (error)

npm install husky --save-dev

npm install @commitlint/cli --save-dev
npm install @commitlint/config-conventional --save-dev

npx husky add .husky/commit-msg 'npx commitlint --edit $1'

{
  "extends": ["@commitlint/config-conventional"]
}

 module.exports = {
  extends: ['@commitlint/config-conventional'],
};

git commit -a -m "Set up Husky and commitlint"

⧗   input: Add Husky and commitlint
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

git commit -m 'feat: set up husky and commitlint'

✋If you have any questions about this article, ask them in our GitHub Discussions 👈
community. You can also

✋ Want to master Angular 14?
Read our angular tutorial and join our #DailyAngularChallenge where we learn to build
components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14
Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to
our feed for updates!

Find a list of emojis to copy and paste

Recently, I noticed that there were repetitive tasks that I was doing for all the new projects. So, I decided to document them so as not to repeat the mistakes. This article is about setting up Prettier, ESLint, Husky in your project.

This article can help you with:

• Keeping your code clean.
• Following standard practices in your code.
• Ensuring that all the tests pass before commit.
• Improving commit quality by adhering to the conventional commit format.

Steps to setup

• Create a React app any way you like. I prefer to do it with NPX.

  For TypeScript project:

  npx create-react-app my-app --template typescript

  For JavaScript project:

  npx create-react-app my-app

  You can also use Yarn or NPM. You can check out CRA docs for more details.

• Open the project: cd my-app.
• Installing dependencies:

  With TypeScript:

  yarn add -D eslint eslint-plugin-react prettier prettier-eslint eslint-plugin-jest eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser husky @commitlint/{config-conventional,cli}

  The versions of packages at the time of writing are:

      "@commitlint/cli": "^13.1.0",
      "@commitlint/config-conventional": "^13.1.0",
      "@typescript-eslint/eslint-plugin": "^4.29.0",
      "@typescript-eslint/parser": "^4.29.0",
      "eslint-plugin-jest": "^24.4.0",
      "eslint-plugin-react": "^7.24.0",
      "eslint-plugin-react-hooks": "^4.2.0",
      "prettier-eslint": "^13.0.0"

  With JavaScript:

  yarn add -D eslint eslint-plugin-react prettier prettier-eslint eslint-plugin-jest eslint-plugin-react-hooks husky @commitlint/{config-conventional,cli}

  The versions of dependencies at the time of writing are:

      "@commitlint/cli": "^13.1.0",
      "@commitlint/config-conventional": "^13.1.0",
      "eslint-plugin-jest": "^24.4.0",
      "eslint-plugin-react": "^7.24.0",
      "eslint-plugin-react-hooks": "^4.2.0",
      "prettier-eslint": "^13.0.0"

• Add Prettier config: create .prettierrc with this content. Also, install the Prettier plugin in VSCode.

    "jsxBracketSameLine": false,
    "eslintIntegration": false,
    "tslintIntegration": true,
    "stylelintIntegration": false,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "quoteProps": "as-needed",

  Note: I prefer this config, you can use Playground and choose what works for you. You can check out the rationale and the options to understand the rules better.

• Add ESLint config: create .eslintrc.json with this config. Also, install the ESLint plugin in VSCode.

  For TypeScript:

      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react-hooks/recommended"
    "parser": "@typescript-eslint/parser",
      "react/react-in-jsx-scope": "off",
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "@typescript-eslint/ban-ts-comment": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "@typescript-eslint/no-explicit-any": "off"

  For JavaScript:

      "plugin:react/recommended",
      "plugin:react-hooks/recommended"
      "react/react-in-jsx-scope": "off",
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"

  The rules I have used are basically to override the recommended settings. The only addition being the rules of hooks.

  Note: Again, these are rules that I prefer, you can add the ones that work for you. You can check ESLint configuration docs to create your rules.

• Add scripts to package.json

  For TypeScript:

      "lint": "eslint "**/*.{ts,tsx,js,jsx}"",
      "prepare": "husky install",
      "test": "react-scripts test"

  For JavaScript:

      "lint": "eslint "**/*.{js,jsx}"",
      "prepare": "husky install",
      "test": "react-scripts test"

• Resolve lint errors: run yarn lint and resolve all warnings and errors (if any). You might see warnings and errors like this:

  warning  'temp' is assigned a value but never used  @typescript-eslint/no-unused-vars
  ✖ 1 problem (0 errors, 1 warning)

• Add Commitlint config:

  echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

  Conventional config is used here, you can also define your config with different rules.

• Install git hooks yarn prepare / npm prepare
  

  Note: Using Husky with Yarn 2 requires different steps.

• Add hooks: you can add any number of hooks you need. In this case, we are adding a pre-commit hook that will check the linting and run tests. We are also adding a Commitlint hook.

  npx husky add .husky/pre-commit 'yarn lint && yarn test --watchAll=false'

  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

  For more specific use cases for Husky, you can check the recipes.

Et voila, this is all you needed to do. You can test the hooks by simply committing.

git commit -m "foo: this will fail"

You should see this in the terminal.

⧗   input: foo: this will fail
✖   type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]
✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/
husky - commit-msg hook exited with code 1 (error)

Note: If you want to skip these hooks, you can commit directly with -n/--no-verify option like git commit -m "yolo!" --no-verify

If you are starting with a new project, you can clone these repos with all the steps already done.

How you use hooks is largely up to you, but there are a few popular use cases worth highlighting in this post. Let’s have a look at five of them.

In this guide, you’ll learn how to:

1. Validate branch names.
2. Run a linter to check commit messages.
3. Run a linter to style/format committed code.
4. Compress any images added to the project.
5. Run Jest tests to ensure that nothing will break.

For this fun project, we’ll be using a fresh installation of Gatsby, but any JavaScript project would do. Let’s get started!

Getting Started with Husky

Like any node package, you can install Husky with npm or yarn:

$ npm install husky --save-dev

Once installed, you will also need to run this command to enable Git hooks:

$ npx husky install

Finally, let’s edit the package.json file so that it automatically runs this last command after installation:

// package.json
{
  "scripts": {
    "prepare": "husky install"
  }
}

That’s it! Husky is ready to be used on the command line, but we should also make sure everything is set up nicely in Tower, our Git client, as well.

Husky and Tower

When you have some Git hooks configured in Husky, you will get an error message in Tower when you attempt to add a commit. Something like:

.husky/pre-commit: line 4: npx: command not found
husky - pre-commit hook exited with code 127 (error)
husky - command not found in PATH=/Library/Developer/CommandLineTools/usr/libexec/git-core:/Applications/Tower.app/Contents/Resources/git-flow:/Applications/Tower.app/Contents/Resources/git-lfs:/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/bin:/sbin

Let’s fix that!

As described here, this happens because GUI apps don’t know the environment set up by your shell. To fix this, we will need to add an environment.plist file in ~/Library/Application Support/com.fournova.Tower3/ and define the PATH environment.

The location will vary depending on your environment. I’m using asdf-nodejs to manage my Node.js versions, so my environment.plist file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>PATH</key>
        <string>/usr/local/bin:/usr/local/sbin:/usr/bin:/usr/sbin:/bin:/sbin:/Users/brunobrito/.asdf/shims</string>
  </dict>
</plist>

After saving this file and restarting Tower, everything looks good to go.

Back to the command line — time for our first hook!

1. Validating Branch Names

This hook can be handy when you want to make sure that every branch name follows a specific pattern, such as starting with feature, fix, or release.

There’s a little npm package that can help us in this process: validate-branch-name. It comes with nice defaults out of the box, that you can further customize with some regex knowledge.

First, let’s install this package:

$ npm install validate-branch-name --save-dev

Now, let’s add it to Husky as a «pre-commit» hook by running the following command:

$ npx husky add .husky/pre-commit "npx validate-branch-name"

You’ll notice that the npx validate-branch-name has been added to Husky’s pre-commit file inside Husky’s hidden folder (.husky/pre-commit).

Let’s try it! Start by creating a branch that does not follow this naming convention, like «test». As soon as you add a commit, you will be presented with the following error message:

Result: "failed" 
Error Msg: Branch name validate failed please rename your current branch 
Branch Name: "test" 
Pattern:"/^(master|main|develop){1}$|^(feature|fix|hotfix|release)/.+$/g" 
husky - pre-commit hook exited with code 1 (error)

Great! It’s working as intended. Let’s shift gears to commit messages.

2. Linting Commit Messages

If you already follow the guidelines from the Angular team, you’re in luck: we’ll use commit-msg-linter, a package that enforces them.

Setting it up is similar to the previous example. First we run the usual installation command…

$ npm install git-commit-msg-linter --save-dev

And now we’ll add it to Husky (as a «commit-msg» hook this time):

$ npx husky add .husky/commit-msg ".git/hooks/commit-msg $1"

To try it out, let’s add a commit message that does not follow Angular’s guidelines, such as «Add Husky hooks». The branch’s name, main, is accepted, but the commit message isn’t, so the commit is aborted:

If we actually follow the Angular conventions, the commit will go through. Two down, three to go!

3. Linting Code

We’re big believers that linters boost developer productivity, so let’s make sure that any code submitted to the repository is properly linted.

We will use not one, but two node packages to achieve this task: lint-staged and Prettier.

lint-staged will be used to run checks on staged files (instead of checking the entire project). Then, Prettier will be responsible for the actual formatting and linting (you could definitely go for ESLint instead!).

Let’s install both packages:

$ npm install lint-staged prettier --save-dev

Now, let’s add the npx lint-staged command as a new line to the «pre-commit» hook:

$ npx husky add .husky/pre-commit "npx lint-staged"

Finally, let’s set up lint-staged in the `package.json file so that it runs Prettier on JS files:

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "**/*.js": "prettier --write --ignore-unknown"
  },
  ...
}

Done! Our JS code will be properly formatted before our commit is added.

4. Compressing Staged Images

While Gatsby does a great job at delivering the best possible images to the user, that’s not always the case with other frameworks — and running tools like ImageOptim every time can be tedious and easy to forget.

Let’s add a little script that automatically compresses any images added to the project. We’ll use ImageOptim-CLI to accomplish this task. You can, of course, use squoosh or imagemin instead.

Let’s first install it (globally):

$ npm install -g imageoptim-cli

Since we only want to compress staged files, let’s add the imageoptim command to lint-staged (ImageOptim is smart enough to only look for image file formats):

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "**/*.js": "prettier --write --ignore-unknown",
    "**/*": "imageoptim"
  },
  ...
}

That’s all there is to it! ImageOptim will automatically launch, compress any images you had in the staging area, and close.

5. Running Tests

Last one! Let’s install Jest to run tests by typing a command I’m sure you already know by heart:

$ npm install --save-dev jest

Now, let’s add a «test» script to our package.json file:

// package.json
{
  "scripts": {
    "prepare": "husky install",
    "test": "jest"
  },
  "lint-staged": {
    "**/*.js": "prettier --write --ignore-unknown",
    "**/*": "imageoptim"
  },
  ...
}

After adding a new JS file and a .test.js file with the actual test, we can run npm test to run Jest.

The output should look similar to this:

> jest

 PASS  ./sum.test.js
  ✓ adds 1 + 2 to equal 3 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.213 s
Ran all test suites.

Finally, let’s add our npm test script to our «pre-commit» hook by following the steps mentioned previously:

$ npx husky add .husky/pre-commit "npm test"

Now, when we add a commit, all five hooks will run. A thing of beauty!

Hurray! We have successfully set up five different Git hooks! 🥳

While hooks can be helpful, there will be times where skipping the execution of these scripts can make sense. While it should be the exception, not the norm, let’s figure out how we can bypass them.

Skipping Hooks

In the terminal, you can bypass hooks by adding the --no-verify option, like in this example:

$ git commit -m "skipping hooks" --no-verify

In Tower, you can easily skip the execution of hooks by checking the «Skip Hooks» checkbox in the «Commit Composing» window. The option will automatically be displayed if you have any «pre-commit» hooks configured.

To skip the execution of hooks for push, pull, merge, rebase, and apply operations, click on «Options» to access the list of additional options.

Final Words

When it comes to automation, each case is unique, and the sky is the limit — hooks are no exception. We hope you found this post useful to get started with Husky!

For more tips, don’t forget to sign up for our newsletter below and follow Tower on Twitter!