0

Currently I am using React with Husky, ESLint and Prettier with the following versions:

{
  "name": "my-project",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    ...
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.8.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --watchAll",
    "test:coverage": "react-scripts test --coverage",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .jsx,.tsx,.js src",
    "lint:fix": "eslint --ext .jsx,.tsx,.ts,.js src --fix",
    "prepare": "husky install",
  },
  "devDependencies": {
    ...
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^8.0.1",
    "prettier": "^2.7.1",
    "prettier-airbnb-config": "^1.0.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

Husky, Prettier and ESLint configuration are already working. The problem is when I wanted to make a commit. Husky configuration has "prettier --write ." files are formatted but in another commit. So, if I made the commit with the pre-commmit husky configuration, the files that are formatted doesn't belong to this commit.

I don't know if the question is clear. Let me put the pre-commit configuration.

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

yarn prettier --write . && clear && yarn lint && clear && yarn test -- --watchAll=false

An example, I have two files with changes. FileA.tsx and FileB.tsx the first one isn't formatted, so "prettier --write ." formatted that file, but in that commit, just the FileB.tsx is up for commit. The other file isn't in the commit I wanted.

Is there a way to run the husky hook for formatting and adding all the formatted files in the same commit?

I've already tried with lint-staged. I made configurations in package.json (I followed this article) but it doesn't work for me :(

cblnpa
  • 397
  • 1
  • 4
  • 20
  • did you try *npm run lint-staged* , and having in package.json **"scripts": {"lint-staged": "lint-staged", "lint": "eslint --no-error-on-unmatched-pattern src/**/*.{js,jsx,ts,tsx,json} --cache-location .eslintcache" }** – Yassine CHABLI Oct 07 '22 at 20:20
  • @YassineCHABLI hey! If I run that command and adding those changes in my package.json did I still need the same configuration in my pre-commit file? (with the prettier --write . && npm lint) ? – cblnpa Oct 07 '22 at 20:25

0 Answers0