2

ESLint が「no-unused-vars」ルールでインポートされた React コンポーネントを検出しないという問題があります。コンポーネントがインポートされます:

import MediaQuery from 'react-responsive';

コンポーネントはファイルのさらに下で使用されます。

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

私の .eslintrc.js ファイルは次のとおりです。

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

linter および linter-eslint パッケージがインストールされた Atom テキスト エディターを使用しています (どちらも最新リリースで最新の状態です)。リンターがインポートされたコンポーネントの使用を検出するために何が欠けていますか?

4

1 に答える 1

4

デフォルトでは、ESLint は JSX で使用される変数を検出しません。それらを使用済みとしてマークするには、 eslint-plugin-reactプラグインのjsx-uses-varsルールを使用する必要があります。

于 2017-03-08T11:20:56.953 に答える