EsLint 误解了 no-unused-vars 中的 import 语句

Posted

技术标签:

【中文标题】EsLint 误解了 no-unused-vars 中的 import 语句【英文标题】:EsLint misinterpreting import statements in no-unused-vars 【发布时间】:2020-11-26 20:21:40 【问题描述】:

我的react 代码正常:

import React from 'react';
import Header from '../components/Common/Header';

// ...
header: (props) => <Header ...props />
// ...other code

我只是想表明所有 imports 都在使用,但仍然给出错误的错误。

我正在使用ESlint config no-unused-vars 规则,但不幸的是它正在这样做:

E:\React\sg_app\src\containers\Todo\TodoScreen.js
  1:8   error  'React' is defined but never used                 no-unused-vars
  2:10  error  'View' is defined but never used                  no-unused-vars
  2:28  error  'StatusBar' is defined but never used             no-unused-vars
  5:8   error  'TodoFilter' is defined but never used            no-unused-vars
  6:8   error  'TodoListView' is defined but never used  

我的 eslint 配置

module.exports = 
  "extends": "eslint:recommended",
  "parser": "babel-eslint",
  "env": 
    "es6": true,
    "jest": true,
  ,
  "parserOptions": 
    "sourceType": "module",
  ,
  "rules": 
      "semi": "warn",
      "no-unused-vars": "warn",
      "no-use-before-define": "off",
      "no-multiple-empty-lines": ["warn", "max": 2],
      "no-console": "warn",
      "arrow-parens": ["error", "as-needed"],
      "comma-dangle": "off",
      // "import/first": "error"
  
;

我如何阻止 eslintReact, View 等用作组件但错误地显示为未使用的导入提供错误?

【问题讨论】:

看看这个包:npmjs.com/package/eslint-plugin-react 你能分享你的eslint 配置文件吗? 我认为我使用@FunkeyFlo 提到的插件取得了一些成功,但使用它也会执行其他不必要的错误, @MwamiTovi 添加了文件 啊,我想我知道问题出在哪里了...您安装了eslint-plugin-react 吗?如果没有,那么您需要为ESlint 安装它以了解所有这些react 行话。如果已经安装,则需要将此行添加到 eslint 配置文件:'plugin:react/recommended'"extends" 键。有意义吗? 【参考方案1】:

回答这个问题以供任何人将来参考 我通过@FunkeyFlo 的建议找到了解决方法 谢谢你的建议 plugin:react/recommended 这个 npmjs.com/package/eslint-plugin-react 包扩展是必要的,以使 eslint 在反应中工作。

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"  //this plugin is required to use eslint for react, otherwise we will get errors for 'React' import, as 'no-unused-vars'
  ],

【讨论】:

以上是关于EsLint 误解了 no-unused-vars 中的 import 语句的主要内容,如果未能解决你的问题,请参考以下文章

带有 React 的 ESLint 给出了 `no-unused-vars` 错误

ESLint 抱怨从未使用过局部状态变量 no-unused-vars

误报 eslint(no-unused-vars)

如何在 vue 脚本中修复“eslint(no-unused-vars)”

解决 ESLint 错误“no-unused-vars”

ESLint - 为 TypeScript 配置“no-unused-vars”