Eslint jsx-quotes 规则不起作用答案

【问题标题】：Eslint jsx-quotes rule not workingEslint jsx-quotes 规则不起作用
【发布时间】：2017-07-24 00:58:39
【问题描述】：

eslint jsx-quotes 规则在 Visual Studio 代码中不起作用。配置：

.eslintrc.json:

{
    "plugins": ["jsx"],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": [2, "never"],
        "jsx-quotes": ["error", "prefer-double"],
        "quotes": ["error", "single"]
    },
    "extends": "eslint:recommended"
}

我所有的其他规则都在起作用。

示例 jsx 不抛出错误：

<div className="hero-head">
        <div className='container'>
          <div className='tabs is-centered'>
            <ul>
              <li><a>This is always at the top</a></li>
            </ul>
          </div>
        </div>
      </div>

我也尝试过在规则名称前加上“jsx/”

我的配置错了吗？

【问题讨论】：

标签： jsx eslint

【解决方案1】：

如果您想为所有文件设置此规则，请在 eslint 配置文件中创建规则。

  rules: {
    'jsx-quotes': [2, 'prefer-single'],
  }

或'prefer-double' 表示双引号。

【讨论】：

【解决方案2】：

“jsx-quotes”规则是核心规则集的一部分。所以不需要插件或前缀。否则配置看起来不错。但是，您发布的示例不是 JSX，它只是 HTML。如果把它变成有效的 JSX，ESLint 在线演示输出 2 个错误： 3:18 - Unexpected usage of singlequote. (jsx-quotes) 和 4:20 - Unexpected usage of singlequote. (jsx-quotes) 用于以下代码：

/* eslint "jsx-quotes": ["error", "prefer-double"] */
var a = (<div className="hero-head">
  <div className='container'>
    <div className='tabs is-centered'>
      <ul>
        <li><a>This is always at the top</a></li>
      </ul>
    </div>
  </div>
</div>);

【讨论】：

为什么是“prefer-double”而不仅仅是“double”？
"prefer-double" 是为了避免在引用文本中使用另一种类型的引号时转义。