为什么 ESLint 看不到 JS 文件的所有引号问题？

Question

Problem: ESLint doesn't see all the quotes problems in my JS file where I use React.

Expected: See that ESLint checks my errors and show them to me.

Things that I tried: I changed some quotes to see the difference and I saw that for the imports ESLint is working, but in the components it doesn't. I checked my rules and there is the 'quotes' rule. I checked my errors to be exactly and just for quotes and I saw that there weren't any problems.

I will attach an image with the problem:

As you can see, in the first line is everything ok, because I put double quotes. Then in the second and in the third lines there are simple quotes and ESLint can see them. It can be seen that ESLint can see just the quotes problem, nothing more.

And then, then it comes the problem. At the 'flex-container' it can't see that there must be double quotes and it can't fix that. And it's not just an exeption, because on the last line are also single quotes and it can't see that.

My.eslintrc.json file:

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true,
        "amd": true,
        "jquery": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
        "react/prop-types": "off",
        "react/jsx-uses-react": "warn",
        "react/react-in-jsx-scope": "off",
        "quotes": [
            "error",
            "double",
            {
                "avoidEscape": true
            }
        ]
    },
    "globals": {
        "React": true,
        "ReactDOM": true,
        "ReactRedux": true,
        "ReactRouterDOM": true,
        "Redux": true
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

There I changed some properties for rules, to put 'error' instead of 'off' or 'warn', but it is the same.

What can I do?

Answer 1

So, the answer from the ESLint authors is:

"The quotes rule works as intended in this case, because it checks only string literals.

For JSX attributes you can use the jsx-quotes rule, as in this demo ."