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

Question

这是我的 .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"
    }
}

我遇到错误，即使 prettier 的 singleQuote 设置为 true。即使对于 eslint，我也将 quote 设置为 single.

我的 VS 代码设置更漂亮-

Answer 1

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

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

将jsxSingleQuote设置为true

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

Prettier configured with Eslint giving error in quotes even when `singleQuotes` set to true

javascript

json

reactjs

eslint

prettier