.prettierrc 配置在 create-react-app 项目中不起作用答案

【问题标题】：.prettierrc config does not work in create-react-app project.prettierrc 配置在 create-react-app 项目中不起作用
【发布时间】：2021-07-06 00:52:39
【问题描述】：

我使用 create-react-app 开始了一个项目。然后，想用 prettier 扩展内置的 eslint 配置。但是，来自 .prettierrc 的配置不适用于 linting 规则。例如，我想要 4 个缩进，但 eslint 仍然应用 2 个缩进。这是我的 package.json 文件和更漂亮的配置。谁能帮我解决这个问题？

package.json:

    {
      "name": "weather-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest",
          "plugin:prettier/recommended"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-prettier": "^3.3.1",
        "prettier": "^2.2.1"
      }
    }

.prettierrc:

{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 4
}

【问题讨论】：

标签： create-react-app eslint package.json prettier

【解决方案1】：

您是否使用过任何 pre-commit 挂钩？

我的意思是我看不到你的脚本中运行 lintfix 的任何地方，也看不到任何钩子，你必须设置一个 pre-commit 钩子才能应用这些 lint 更改。

可以阅读this 以了解预提交钩子，我想这将解决您使用钩子设置提交时的问题。

这个link 将帮助您了解如何将它与 linter 集成。

【讨论】：