linking pre-commit hook to VSC source control

Question

My goal is that every time I git commit, eslint should run first. Currently, I'm using husky hooks.

When I commit through the terminal with git commit -m "some message", it's working as expected.

The problem is when I'm using the source control in Visual Studio Code (or webStorm).

source control commit

When I commit like this, eslint won't run.

This is the husky pre-commit file: husky pre-commit file.
This is the package.json script section: package.json script section

Answer 1

installing husky with recommended steps seems to works for me:

 From github.com:rachOS/BonApp-FRONT
 * branch            feature/create-user-account -> FETCH_HEAD
> git status -z -u
> git symbolic-ref --short HEAD
> git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track) refs/heads/feature/create-user-account refs/remotes/feature/create-user-account
> git for-each-ref --sort -committerdate --format %(refname) %(objectname) %(*objectname)
> git remote --verbose
> git config --get commit.template
> git ls-files --stage -- /home/rach/Documents/Code/BonApp/front-bon_app.ts/src/entities/Recipe.ts
> git cat-file -s 96fa250abd168e2175cffe887b14db1f5787e7dc
> git show --textconv :src/entities/Recipe.ts
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
> git ls-files --stage -- /home/rach/Documents/Code/BonApp/front-bon_app.ts/src/entities/Recipe.ts
> git cat-file -s 96fa250abd168e2175cffe887b14db1f5787e7dc
> git show --textconv :src/entities/Recipe.ts

> front-bon_app.ts@0.1.0 validate
> npm-run-all --parallel  check-format lint build


> front-bon_app.ts@0.1.0 lint
> eslint --ignore-path .gitignore -c .eslintrc --ext .ts --fix .


> front-bon_app.ts@0.1.0 build
> react-scripts build


> front-bon_app.ts@0.1.0 check-format
> npm run format -- --list-different


> front-bon_app.ts@0.1.0 format
> npm run prettier -- --write  "--list-different"


> front-bon_app.ts@0.1.0 prettier
> prettier --ignore-path .gitignore "**/*.+(js|ts|json|jsx|tsx|css|html)" "--write" "--list-different"

Creating an optimized production build...
Compiled with warnings.

src/adapters/primary/components/Form/Form.jsx
  Line 103:3:   'readOnly' is defined but never used  no-unused-vars
  Line 137:45:  'type' is defined but never used      no-unused-vars

src/adapters/primary/components/Signup/manager/SignupManager.jsx
  Line 4:10:  'signup' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  59.19 KB  build/static/js/2.58d43881.chunk.js
  1.63 KB   build/static/js/3.90fad592.chunk.js
  1.55 KB   build/static/js/main.5cbbd48f.chunk.js
  1.17 KB   build/static/js/runtime-main.63262bbd.js
  1.14 KB   build/static/css/main.8636b64b.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment
> git status -z -u
> git symbolic-ref --short HEAD
> git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track) refs/heads/feature/create-user-account refs/remotes/feature/create-user-account
> git for-each-ref --sort -committerdate --format %(refname) %(objectname) %(*objectname)
> git remote --verbose
> git config --get commit.template
> git config --get commit.template
> git ls-files --stage -- /home/rach/Documents/Code/BonApp/front-bon_app.ts/src/entities/Recipe.ts
> git cat-file -s 96fa250abd168e2175cffe887b14db1f5787e7dc
> git show --textconv :src/entities/Recipe.ts

Answer 2

I recently installed husky for my react app. I simply followed the instructions from the official guide Getting started | husky. As I am using yarn, I specifically followed the steps from the yarn section Yarn 2 install

1. Install husky

yarn add husky --dev

2. Enable git hooks

yarn husky install

3. Install the hook you want - in my case I wanted husky to run npx pretty-quick --staged

yarn husky set .husky/pre-commit \"npx pretty-quick --staged\"

4. To have Git hook enabled after install edit package.json. You will need this if you plan to clone the repository and run yarn install.

{
  "scripts": {
    "postinstall": "husky install"
  }
}

After this, I committed my changes using VS Code source control. To verify if the husky pre-hook was working I checked to Git logs. You can find them in the Debug Console (open it with Shift+Escape), go to the OUTPUT tab and select the Git option from the dropdown menu.