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

Posted 2023-02-22

【中文标题】.prettierrc 配置在 create-react-app 项目中不起作用

【英文标题】：.prettierrc config does not work in create-react-app project

【发布时间】：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

【参考方案1】：

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

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

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

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