ESLint doesn't see all the quotes problems of a JS file

[NicolaeTelescu]

Tell us about your environment

• ESLint Version Local: 7.18.0
• ESLint Version Global: Not found
• Node Version: 12.18.3
• npm Version: 6.14.5
• Operating System: Windows 10

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using? I don't know. In my config file are some options about a parser, maybe that information can help you.

Please show your full configuration:

Configuration

``` { "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" } } } ```

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import {HomePage} from "./structure/HomePage/HomePage.js";
import {PackItemPages} from './structure/item/_PackPages.js';
import {allReducers} from './redux/reducers/index.js';

const Provider = ReactRedux.Provider;

const Router = ReactRouterDOM.BrowserRouter;
const Switch = ReactRouterDOM.Switch;
const Route = ReactRouterDOM.Route;

function App() {
    return (
        <div className='flex-container'>

            <Header />
            <Message />
            <Switch>
                <Route path='/' exact component={HomePage} />
                <Route path="/items" component={PackItemPages} />
            </Switch>
            <Footer />

        </div>
    );
}

I use VS Code with the ESLint extension so text editor shows me the errors.

What did you expect to happen? I wanted to see the 'flex-container' and 'path' value as a problem because they have simple quotes, not double quotes, as I can see at the second and at the third line in the code, where are imports.

What actually happened? Please copy-paste the actual, raw output from ESLint.

Steps to reproduce this issue:

1. If you create a component in React, the strings from there can't be checked by ESLint. At least, that is happening in my code.

Are you willing to submit a pull request to fix this bug? Unfortunately no, but I wish to see where and how code will be modified to know more and be more prepared in the future to submit some pull requests, if they can help.

Images: This image can show that there are no more errors than quotes and that the errors are happening just for the imports, as I said.

[NicolaeTelescu]

As an user told me: It might be because it's a JSX prop value, not a JS string literal (try if it can detect className={'flex-container'}). In this way ESLint could see the problem :).

[mdjermanovic]

Hi @NicolaeTelescu, thanks for the issue!

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.

[NicolaeTelescu]

Thank you for the response!

I really didn't know that for those attributes was another rule for quotes. I will close this issue.