husky and lint staged not prettifying the code

Question

Working with the react project.

Here is my project sturcture

Here is my package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=8080 npx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "lint-staged": {
    "./frontend/src/**": ["prettier --write ./frontend/src"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "husky": "^8.0.3",
    "lint-staged": "^13.1.0",
    "prettier": "2.8.3",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }
}

git is outside the frontend folder and I need to install husky prettier inside frontend when commiting... The above is not working what I am missing here? I want only prettifying not linting

Answer 1

Maybe, because of husky's version. Above 4.x, configuring husky in package.json will fail. It is recommended to modify the prepare script command such as "prepare": "husky install && husky add .husky/pre-commit \"npx lint-staged\"" and execute npm run prepare.