如何在代码提交之前添加更漂亮的命令，或者在保存文件时通过dev依赖性添加更漂亮的命令

Question

我在做反应项目。

当我保存代码时，我希望我的vscode使用autoformat，但是我想通过在package.json中添加一些包来实现(我不确定它是否可能)&而不是使用vscode，因为人们在vscode中有自己的配置，所以为了与那些配置相同，我想用更漂亮的配置。这是我更漂亮的配置文件

.prettierrc.json

{
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120
}

package.json

    {
  "name": "XXXXXXXXXXXX",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^4.20.0",
    "browser-image-compression": "^2.0.0",
    "dotenv": "^16.0.0",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.5.0",
    "formik": "^2.2.9",
    "isomorphic-fetch": "^3.0.0",
    "material-ui-icons": "^1.0.0-beta.36",
    "moment": "^2.29.3",
    "prettier-eslint": "^13.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-dropzone": "^12.0.5",
    "react-js-pagination": "^3.0.3",
    "react-modal": "^3.14.4",
    "react-moment": "^1.1.2",
    "react-multiselect-checkboxes": "^0.1.1",
    "react-number-format": "^4.9.3",
    "redux": "^4.2.0",
    "redux-form": "^8.3.8",
    "redux-observable": "^2.0.0",
    "redux-promise-middleware": "^6.1.2",
    "redux-thunk": "^2.4.1",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "npx prettier --write .",
    "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"
    ]
  },
  "devDependencies": {
    "husky": "^8.0.0",
    "prettier": "2.6.2",
    "pretty-quick": "^3.1.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

Answer 1

您可以使用更漂亮的预提交工具。这可以在提交之前通过git添加重新格式化标记为“分阶段”的文件。

在继续之前，请确保安装了更漂亮的devDependencies，并将其安装在您的中。

npx mrm@2

使用此链接获取更多信息。

Pre-commit Hook