Eslint jsx-quotes 规则不起作用

Question

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/”前缀

是我的配置错误吗？

Answer 1

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

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

或者用“prefer-double”表示双引号。

Answer 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>);