Prettier 配置了 Eslint，即使 `singleQuotes` 设置为 true，也会在引号中给出错误答案

【问题标题】：Prettier configured with Eslint giving error in quotes even when `singleQuotes` set to truePrettier 配置了 Eslint，即使 `singleQuotes` 设置为 true，也会在引号中给出错误
【发布时间】：2021-07-13 02:56:23
【问题描述】：

这是我的 .eslintrc.json react 应用文件。

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["react-app", "prettier"],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": ["react", "prettier"],
    "rules": {
        "prettier/prettier": [
            "warn",
            {
                "singleQuote": true,
                "trailingComma": "es5",
                "jsxBracketSameLine": true,
                "useTabs": true
            }
        ],
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "quotes": ["error", "single"]
    }
}

这些是我在package.json 文件中的依赖项（这不是文件的完整代码，只是依赖项）

{
    "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",
        "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "4.22.0",
        "@typescript-eslint/parser": "4.0.0",
        "eslint-config-prettier": "^8.2.0",
        "eslint-config-react-app": "6.0.0",
        "eslint-plugin-flowtype": "5.2.0",
        "eslint-plugin-import": "2.22.0",
        "eslint-plugin-jest": "24.0.0",
        "eslint-plugin-jsx-a11y": "6.3.1",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "7.20.3",
        "eslint-plugin-react-hooks": "4.0.8",
        "eslint-plugin-testing-library": "3.9.0",
        "install-peerdeps": "^3.0.3",
        "prettier": "^2.2.1",
        "typescript": "^4.2.4"
    }
}

即使 singleQuote of prettier 设置为 true，我仍面临错误。即使对于 eslint，我也将 quote 设置为 single。

我的 VS 代码设置更漂亮-

【问题讨论】：

您的 eslint 和 prettier 可能会在自动格式化您的代码方面竞争。另外，请查看eslint-config-prettier。
是的，我知道这个包，我们可以使用eslint-config-prettier 命令来检查是否有任何冲突的规则，但是 prettier 和 eslint 中的引号都设置为“single”，所以这绝对不是问题.现在已经解决了，下面的答案解决了我的问题:)

标签： javascript json reactjs eslint prettier

【解决方案1】：

查看文档：https://prettier.io/docs/en/options.html#quotes

它明确指出“JSX 引号忽略此选项 - 请参阅 jsx-single-quote。”

将jsxSingleQuote 设置为true

【讨论】：

为我工作，感谢您的帮助！