VSCODE & GitHub Desktop pre-commit hook: npx: command not found

Question

I am starting a new repo, thinking I should use the most recent Huksy v6 which is installed from LintStaged using their setup guide:

npx mrm lint-staged

// package.json updated with:
"husky": ">=6",
"lint-staged": ">=10",

This adds necessary packages and adds the husky files including the precommit files:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

When i run my commit in the terminal it works fine. However, if I try to run my commit in GitHub Desktop or VSCode (which I know some teammates do), it results in an error for both:

npx: command not found. husky - pre-commit hook exited with code 127 (error)

I have npx installed:

npx -v
// 6.14.10

If I try to install in globall, such as described in other StackOverflow suggestions, it returns a warning about existing location (with & with out sudo):

ERR! EEXIST: file already exists, symlink '../lib/node_modules/npx/index.js' -> '/Users/plucks/.nvm/versions/node/v14.15.4/bin/npx' npm ERR! File exists: /Users/plucks/.nvm/versions/node/v14.15.4/bin/npx npm ERR! Remove the existing file and try again, or run npm npm ERR! with --force to overwrite files recklessly.

Is there anything I can do so the programs like VSCode & GitHub Desktop can run?

Answer 1

I had to combine the answers of Cathal and Misol.

I did not want to edit the .husky/pre-commit like Cathal for two reasons:

1. I would need to that for every project I use husky in
2. It would actually break husky for my fellow developers on Windows

So I added a global ~/.huskyrc file like Misol did with the following contents:

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

Answer 2

I've got the solution from here. Hope you can find it as well!

• https://typicode.github.io/husky/#/?id=command-not-found
• https://github.com/typicode/husky/issues/912

Here it is, for clarity:

• add a file ~/.huskyrc if you don't have one already
• make sure it includes the following:

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Answer 3

If you are working on a team with other people who may have installed nvm or node in slightly different fashion than you have, I would not recommend adding any export statements or edits to the $PATH in your .husky/precommit or ~/.huskyrc files.

If you want your VSCode to have proper access to the $PATH you expect from terminal you should always launch VSCode from terminal in the folder you are working from.

For example, in a terminal window:

~/_git/my_project: code .

Will launch VSCode with my_project open in a new window (it should remember your tabs and window state from the last time you worked on your project).

VSCode will now use the $PATH your terminal uses from your ~/.zshrc or ~/.bashrc, etc.

With this setup my .husky/precommit looks like this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

and my my .lintstagedrc.json looks like this:

{
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix --debug --max-warnings=-1",
    "npm run lint:prettier-fix"
  ],
  "*.{css,less,sass,scss}": ["npm run lint:prettier-fix"],
  "*.{g?(raph)ql,json,html,md,y?(a)ml}": ["npm run lint:prettier-fix"]
}

Answer 4

As per this suggestion, adding the following to your pre-commit file should fix it:

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

So the full file would look like this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

npm run test

Answer 5

Open VSCode settings and set the Inherit Env setting (Terminal > Integrated: Inherit Env) to false:

"terminal.integrated.inheritEnv": false

This setting enables or disables whether new shells should inherit their environment from VS Code.

Answer 6

For husky>=6: update your .husky/pre-commit file to contain this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

npx lint-staged

This will find and expose the current node path and therefore npx path that you are using, which has been configured with Node Version Manager nvm

Answer 7

I change code as the top answer says. But it doesn't works at first, and then reopen VScode and it works.

In the terminal, I input these commands:

1. copy this command in terminal and press enter.

vi ~/.huskyrc

2. copy this command in terminal.

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

3. input :wq to quit edit state

4. reopen VScode.

Answer 8

For those using fnm instead of nvm, adding the following to ~/.huskyrc worked for me:

eval "$(fnm env)"

Answer 9

Before adding any modifications to your project try restarting your IDE as mentioned in this issue

Answer 10

The other suggestions are fine until you have only one node version if you have two node versions and in one of them you don't have the yarn, you will face this issue, so do a simple change

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# This take the current active node version you want to verify the hook
export NVM_DIR="$HOME/.nvm"
a=$(nvm current)

export PATH="$NVM_DIR/versions/node/$a/bin:$PATH"