如何禁用对前缀为下划线(_)的标识符发警告 [英] How to disable warnings for identifiers prefixed with underscore (_)

问题描述

背景和介绍

作为React.js中的一名开发人员，我非常感谢我所能提供的自动化帮助 从ESLint获取代码问题，如未使用 标识符。

我有a very small example project in a zip file 我用它来试验ESLint。

即使没有显式的ESLint规则，Visual Studio代码也会指示 未使用的标识符会以不太鲜艳的颜色显示。
在下面的截图中，unUsedArgument和unUsedVariable将 以与prevToggle大致相同的颜色显示，如果 已使用。

即使没有https://i.imgur.com/R2VEb3s.png"，VS代码也会指出哪些标识是未使用的

App.js书面：

// App.js
import React, { useCallback, useState } from 'react';
import './App.css';
import Button from './components/UI/Button/Button';

function App(unUsedArgument) {
  const [unUsedVariable, setShowParagraph] = useState(true);
  const showParagraphFcn = useCallback(() => {
    setShowParagraph((prevToggle) => !prevToggle);
  },[]);
  console.log('App RUNNING');
  return (
    <div className='app'>
      <h1>Hi there!</h1>
      <Button onClick={showParagraphFcn}>A Button</Button>
    </div>
  );
}
export default App;

下载the mentioned zip file后，运行 npm install后跟npm start，在我的默认设置中打开一个网页 Web浏览器。 当我点击F12时，它看起来如下所示。 ¹

屏幕截图显示，在没有ESLint的情况下，不会出现错误或警告 显示在浏览器的控制台中。 尽管unUsedArgument和 unUsedVariable确实未使用。

---

我的package.json如下-开始。

package.json：

{
  "name": "Disable warnings when prefixed with underscore (_)",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ]
  }
}

此外，我还有一个eslintConfig.json文件，其内容是 最初在package.json中，但我故意将其删除 查看行为是如何受到影响的。

eslintConfig.json：

,
  "eslintConfig": {
    "extends": "react-app"
  }

令人惊讶的是，当我运行npm install时，ESLint包是 已下载(包含单词的node_modules的18个子目录 eslint)，即使package.json不包含任何 将安装或配置ESLint。 (我不会期望任何ESLint子目录 已下载。)

以下是如何从命令行运行ESLint命令。
如果您使用的是Microsoft Windows，请使用第一行(反斜杠)。
如果您使用的是Linux或MacOS(正斜杠)，请使用第二行。

node_modules.bineslint . --ext .js
node_modules/.bin/eslint . --ext .js

回复的前三行有点令人困惑：

Oops! Something went wrong! :(
ESLint: 7.32.0
ESLint couldn't find the plugin "eslint-plugin-react".

这三条消息似乎表明已安装ESLint，但未安装 已为React.js配置。

因此，我的下一个操作是添加eslintConfig属性(Back) 进入package.json(紧跟在browserslist之后)。 ² 这样做之后，运行ESLint命令的结果

node_modules.bineslint . --ext .js
node_modules/.bin/eslint . --ext .js

现在是

警告内容为：

'unUsedVariable' is assigned a value but never used no-unused-vars

因此，在没有任何进一步配置的情况下，ESLint会警告未使用的 变量，但不是关于未使用的参数(参数)。 我希望得到有关两个未使用的标识符的警告。
此外，我希望拥有禁用ESLint警告的选项 对于未使用的参数和以下划线开头的变量 (_)。 有这样的规则意味着我可以很容易地关闭这些 警告-永久或临时-只需在 带有_(下划线)的标识符。

---

在Visual Studio代码中，我可以通过添加一个专门设计的 ESLint注释。 ³

/*eslint no-unused-vars: ["warn",{"argsIgnorePattern": "^_","varsIgnorePattern": "^_"}]*/

我想问的问题

这一切看起来都很好。
但我不喜欢的是，用ESLint扰乱我的Java代码 每个文件中的注释。
我希望为整个项目设置ESLint规则，以便 所有JavaScript文件均遵循这些规则。

如何才能在不散布难看的ESLint的情况下获得准确的行为 我的JavaScript代码上都有注释吗？

参考资料

• ESLint
• Zip file containing the needed project files
以全局安装而不是本地安装href="https://eslint.org/docs/user-guide/getting-started#installation-and-usage" (npm install eslint --global)不推荐
• VS Code ESLint extension
• In vs Code，Add"eslint.nodePath": "C:\Program Files\nodejs", 至settings.json

---

¹ 对我来说，npm install命令花费了从4点到11点的任何时间 分钟即可完成。
npm install命令下载并安装所有Node.js包 在package.json文件中列出。
npm start命令启动本地Web服务器并打开 您的默认Web浏览器中的public/index.html文件，在我的情况下 谷歌Chrome 98.0.4758.102版，64位，运行Windows 10。
当您想要关闭服务器时，点击 Ctrl+C。

² 原来这次您不需要运行npm install。

³这可能适用于许多其他文本编辑器和 IDE：也是如此，例如JetBrains的WebStorm。

推荐答案

如何才能在不散布难看的ESLint的情况下获得准确的行为 我的JavaScript代码上都有注释吗？

只需在eslintConfig属性下添加rules，即可使 package.json如下所示。

package.json：

{
  "name": "Disable warnings when prefixed with underscore (_)",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version"
    ]
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_",
          "varsIgnorePattern": "^_"
        }
      ]
    }
  }
}

从App.js中删除ESLint注释。 ¹

查看您是否成功：

node_modules.bineslint . --ext .js
node_modules/.bin/eslint . --ext .js

预期看到：

如果您的文本编辑器(在我的例子中是代码)仍处于打开状态，请确保 在您期望看到这一新行为之前，您可以重新启动它。 在文本编辑器中添加和删除下划线 前缀以查看警告消失并再次出现。

注意！ 我强烈建议不要将ESLint规则放在一个单独的 .eslintrc.*配置文件。
如果您想知道为什么，请查看<我最近发布的帖子的href="https://stackoverflow.com/a/71362095">one 关于该主题的答案。

您使用的是TypeScrip吗？

我自己还不是TypeScrip的用户，所以我还没有尝试过这个 该语言的解决方案。 如果它不适用于TypeScrip，请尝试安装 @babel/eslint-parser。

npm install eslint @babel/core @babel/eslint-parser --save-dev

如果它仍然不起作用，考虑阅读 this question。

参考资料

• Parsing error: The keyword 'import' is reserved-a Simple 解决方案
• @babel/eslint-parser – usage
• How to disable warnings about unused identifiers (TypeScript)

---

¹在这种情况下，您无需运行npm install。
只需在eslintConfig下添加rules属性就足够了。

这篇关于如何禁用对前缀为下划线(_)的标识符发警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！