Prettier 配置了 Eslint，即使 `singleQuotes` 設置為 true，也會在引號中給出錯誤

Question

這是我用於反應應用程序的.eslintrc.json文件。

{
    "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設置為true 。 即使對於 eslint，我也將quote設置為single 。

我的 VS 代碼設置更漂亮-

Answer 1

請參閱文檔： https://prettier.io/docs/en/options.html#quotes

它特別指出“JSX 引號忽略此選項 - 請參閱 jsx-single-quote。”

將jsxSingleQuote設置為true