与反应一起使用时不应该禁用 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

这不应该发生。 我要配置什么才能让它明白这些不是"never used"？

Answer 1

我认为您可以在 .eslintrc 文件中将 React 和其他这些作为全局添加。

Answer 2

由于您使用的是 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')
);

Answer 3

有一些规则随 eslint-plugin-react 一起提供，您可以启用这些规则来为您解决这些问题。具体来说，它们是

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md

有一个推荐的 eslint-plugin-react 配置，使用它会很好： https://github.com/yannickcr/eslint-plugin-react#recommended

与反应一起使用时不应该禁用 eslint

Should not have to disable eslint when using with react

javascript

reactjs

eslint