时间戳

首页 > 解决方案 > .prettierrc 配置在 create-react-app 项目中不起作用

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

问题描述

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

包.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-appeslintpackage.jsonprettier

解决方案

您是否使用过任何预提交挂钩？

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

可以阅读本文以了解预提交挂钩，我想这将解决您在使用挂钩设置提交时遇到的问题。

此链接将帮助您了解如何将其与 linter 集成。

推荐阅读