为什么我的 React 应用程序 linting 配置需要双引号而不是单引号？

Question

我在诊断 linting 配置异常时遇到问题。它要我使用双引号，我不一定介意，但我不明白 为什么 因为据我所知我的所有规则都想要单引号。

这是一个 React 应用程序。我的设置将 ESLint 与 Airbnb 和 Prettier 结合使用。我根据相关插件的教程和文档安装了软件包。我正在使用 VSCode.

进行编辑

我在package.json（项目根目录）中有以下相关包：

    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-import-resolver-webpack": "^0.11.1",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "prettier": "^1.17.1",

我在 .eslintrc.json 中有以下内容（也在项目根目录中）。这包括我为我的项目指定的一些自定义规则。

{
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["react", "jest", "prettier"],
    "rules": {
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", "jsx"]
            }
        ],
        "prettier/prettier": "error",
        "class-methods-use-this": 0,
        "no-else-return": 0,
        "no-plusplus": [2, { "allowForLoopAfterthoughts": true }],
        "no-param-reassign": 0,
        "no-use-before-define": ["error",  { "functions": false }],
        "import/no-named-as-default": 0

我的主要问题：为什么将单引号显示为错误？

这是因为我的配置中某处我不知道的规则吗？我是否没有正确包含其中一个插件？

我知道一些规则可能需要在 JSX 中使用双引号，但这会抱怨双引号 anywhere.

目前，我没有使用任何 .jsx 个文件。

截图：

Complete project on GitHub

[Edit 6/3/19] 我可能找到了一些信息，但我还是有点困惑...阅读 eslint-config-prettier documentation, does this mean that double quotes are actually the default? But according to official Prettier docs，单引号应该是默认的，对吧？我没看错吗？

Answer 1

我认为这是对 Prettier 默认值的根本误解；它确实想要双引号，而不是单引号，但我误读了相反的意思。

Answer 2

您可以尝试 quotes 选项而不是 prettier 吗？这样你就可以明确地告诉 eslint 你想在 JS 中使用单引号。

"quotes": ["error", "single"]

如果你想在 JSX 中使用双引号，你可以使用下面的设置。

"jsx-quotes": ["error", "prefer-double"]

我正在做的项目中都在使用，到目前为止没问题。希望对你有帮助。

为什么我的 React 应用程序 linting 配置需要双引号而不是单引号？

Why does my linting configuration for a React app want double quotes instead of single?

eslint

prettier

eslint-config-airbnb