Eslint jsx-quotes rule not working

Question

eslint jsx-quotes rule not working in visual studio code. config:

.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"
}

All my other rules are working.

Example jsx not throwing an error:

<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>

I have also tried it with prefixing the rule name with "jsx/"

Is my config wrong?

Answer 1

If you would like to set this rule for all files, create the rule in the eslint config file.

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

Or 'prefer-double' for double quotes.

Answer 2

"jsx-quotes" rule is part of the core rule set. So no need to plugin or prefix. Otherwise configuration looks good. However, example that you posted is not JSX, it's just HTML. If you turn it into valid JSX, ESLint online demo output 2 errors: 3:18 - Unexpected usage of singlequote. (jsx-quotes) and 4:20 - Unexpected usage of singlequote. (jsx-quotes) for the following code:

/* 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>);