javascript - ESLint not detecting imported React Components - Stack Overflow

admin管理员组

文章数量:1387360

I am having an issue with ESLint not detecting imported React ponents with a 'no-unused-vars' rule. My ponents are imported:

import MediaQuery from 'react-responsive';

and the ponent is used further down in the file:

render() {
  return (
    <MediaQuery maxDeviceWidth={750}>
      <div style={styles.iconMobileContainerRight} >
        <i className="fa fa-chevron-right" style={styles.checkboxMobile} aria-hidden="true" ></i>
      </div>
    </MediaQuery>
  );
}

My .eslintrc.js file is as follows:

module.exports = {
    "env": {
        "browser": true,
        "monjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:remended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

I am using the atom text editor with the linter and linter-eslint packages installed (both up to date with the latest releases). What am I missing to make the linter detect the use of the imported ponent?

I am having an issue with ESLint not detecting imported React ponents with a 'no-unused-vars' rule. My ponents are imported:

import MediaQuery from 'react-responsive';

and the ponent is used further down in the file:

render() {
  return (
    <MediaQuery maxDeviceWidth={750}>
      <div style={styles.iconMobileContainerRight} >
        <i className="fa fa-chevron-right" style={styles.checkboxMobile} aria-hidden="true" ></i>
      </div>
    </MediaQuery>
  );
}

My .eslintrc.js file is as follows:

module.exports = {
    "env": {
        "browser": true,
        "monjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:remended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

I am using the atom text editor with the linter and linter-eslint packages installed (both up to date with the latest releases). What am I missing to make the linter detect the use of the imported ponent?

• javascript
• reactjs
• atom-editor
• eslint
• linter

Share Improve this question Follow edited Feb 25, 2017 at 17:16 Dan Lowe 56.9k2020 gold badges131131 silver badges114114 bronze badges asked Feb 25, 2017 at 13:14 bgmasterbgmaster 2,33344 gold badges2828 silver badges4242 bronze badges 2

• @MayankShukla The errors is 'no-unused-vars'. You can read more about it at the eslint docs: eslint/docs/rules/no-unused-vars – bgmaster Commented Feb 26, 2017 at 16:53
• No, it appears to have to do with my React configuration, but I'm not sure what. I'm not super familiar with ESLint and how it needs to be configured. – bgmaster Commented Feb 26, 2017 at 16:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

ESLint by default does not detect variables used in JSX. To mark them as used, you should use the jsx-uses-vars rule of the eslint-plugin-react plugin.

本文标签： javascriptESLint not detecting imported React ComponentsStack Overflow