如何禁用以下划线 (_) 为前缀的标识符的警告

Question

背景与介绍

作为 React.js 的开发人员，我非常感谢自动帮助我可以从 ESLint 获得有关代码问题的信息，例如 未使用的标识符。

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

即使没有明确的 ESLint 规则，Visual Studio 代码表明了什么标识符 未使用 以不太鲜艳的颜色显示。
在下面的屏幕截图中，unUsedArgument 和 unUsedVariable 将已显示为与 prevToggle 大致相同的颜色，如果它们 使用过.

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，一个网页在我的默认网络浏览器中打开。按 F12 使其看起来如下所示。 ²

屏幕截图显示 - 没有 ESLint - 没有错误或警告显示在浏览器的控制台中。尽管 unUsedArgument 和 unUsedVariable确实未使用。

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"
  }

当运行ning npm install 时，ESLint 包被下载 – 18 node_modules 的子目录包含单词 eslint.
（发生这种情况是因为包 react-scripts 间接依赖在 ESLint 包上.)

以下是如何从命令行运行 ESLint 命令。

npx eslint . --ext .js

响应的前三行表明 ESLint 是已安装，但未配置：

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

因此，我的下一步行动是添加 eslintConfig 属性（返回）进入 package.json。 ³
这样做之后，运行ning npx eslint . --ext .js 的结果是：

警告内容如下：

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

因此，无需任何进一步的配置，ESLint 会警告 unused variable 但不是关于 unused argument （参数）。我更愿意收到有关两个未使用标识符的警告。
此外，我希望可以选择禁用 ESLint 对以开头的未使用参数和变量的警告 下划线 (_).
有了这样的规则就意味着我可以很容易地关闭这些警告 - 永久或暂时 - 通过简单地前缀带有 _（下划线）的标识符。

在Visual Studio代码中我可以通过添加一个特殊的设计的 ESLint 注释。 ⁴

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

我想问的问题

这看起来不错。
但我不喜欢的是用 ESLint 弄乱我的 JavaScript 代码所有文件中的评论。
我更愿意为整个项目设置ESLint规则，这样所有 JavaScript 个文件自动遵守这些规则。

如何在不散布丑陋的 ESLint 的情况下获得这种确切的行为在我的 JavaScript 代码中评论？

参考资料

ESLint

Zip file containing the needed project files

Create React App (CRA)

全局而不是本地安装 ESLint (npm install eslint --global) 不推荐

VS Code ESLint extension

在 VS Code 中，添加 "eslint.nodePath": "C:\Program Files\nodejs", 至 settings.json

^{¹
该项目最初创建为 Create React App (CRA).

从那以后，我故意删除了
eslintConfig package.json 中的属性用于实验目的。
²
对我来说，npm install 命令花费了 4 到 11 的任何时间
分钟完成。

npm install 命令下载并安装所有 Node.js 包
在 package.json 文件中列出。

npm start 命令启动本地 Web 服务器并打开
public/index.html 文件在你的默认网络浏览器中，在我的例子中
Google Chrome 版本 98.0.4758.102，64 位，运行正在 Windows 10.

当你想关闭服务器时，点击
Ctrl+C.
³
这次不需要运行 npm install，因为没有包受到影响。
⁴
许多其他文本编辑器和 IDE:s 可能也是如此，
例如 JetBrains 的 WebStorm。}

Answer 1

How can I get this exact behavior without scattering ugly ESLint comments all over my JavaScript code?

只需在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 注释，并且仍然可以获得期望的行为。

检查是否成功：

npx eslint . --ext .js

期待看到：

如果您的文本编辑器（在我的例子中是 VS Code）仍然打开，请确保在您期望看到这种新行为之前重新启动它。在文本编辑器中添加和删除下划线前缀以查看警告消失并再次出现。

注意！ 我建议不要将 ESLint 规则放在一个单独的 .eslintrc.* 配置文件。 ²

参考资料

Looong answer to Parsing error: The keyword 'import' is reserved
Short answer to Parsing error: The keyword 'import' is reserved
@babel/eslint-parser – usage

^{¹
在这种情况下，不需要运行 npm install。
eslintConfig下添加rules属性即可。
²
如果你想知道为什么，比较 with 。}

如何禁用以下划线 (_) 为前缀的标识符的警告

How to disable warnings for identifiers prefixed with underscore (_)

reactjs

npm

eslint

create-react-app

背景与介绍

我想问的问题

参考资料

参考资料