javascript - 与 react 一起使用时不应该禁用 eslint

Question

因此请考虑以下 eslint 文件:

{
    "env": {
        "browser": true,
        "es6": 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"
        ]
    }
}

这是非常基本的。我使用 eslint:recomended 扩展和 react插件。

现在考虑以下文件:

import React from 'react'; // eslint-disable-line
import ReactDOM, { render } from 'react-dom'; // eslint-disable-line
import StartUp from './components/startup.js'; // eslint-disable-line

render(
  <StartUp />,
  document.getElementById('app')
);

注意禁用。如果我关闭 elsint，整个系统工作正常，没有导入失败，找到所有内容，整个应用程序加载正常。

但是如果我移除这些禁用，我会得到以下结果:

  1:8  error  'React' is defined but never used     no-unused-vars
  2:8  error  'ReactDOM' is defined but never used  no-unused-vars
  3:8  error  'StartUp' is defined but never used   no-unused-vars

这不应该发生。 我必须配置什么才能理解这些不是“从未使用过”？

Answer 1

由于您使用的是 Webpack，因此您可以完全绕过 ESLint，只需使用 ProvidePlugin 确保 React 和 ReactDOM 在任何地方都可用即可。 .您可以在 Webpack 配置文件中像这样使用它:

const webpack = require('webpack');

module.exports = {
  // The rest of your config file...
  ...,
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom'
    })
  ]
};

对于最后一个，确保您已经安装了 ESLint React plugin

npm install eslint-plugin-react --save-dev

然后包含插件并确保启用 jsx-uses-vars 规则。

{
  ...
  "plugins": ["react"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-vars": ["error"]
  }
}

那么你的代码可以这样写:

import { render } from 'react-dom';
import StartUp from './components/startup.js';

render(
  <StartUp />,
  document.getElementById('app')
);