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

Posted 2023-02-26

【中文标题】ESLint - 为 TypeScript 配置“no-unused-vars”

【英文标题】：ESLint - Configuring "no-unused-vars" for TypeScript

【发布时间】：2020-01-08 03:41:39

【问题描述】：

我在所有 TypeScript 项目中都使用 ESLint，设置如下：

  "extends": ["airbnb", "prettier", 'plugin:vue/recommended'],
  "plugins": ["prettier"],
  "parserOptions": 
  "parser": "@typescript-eslint/parser",
  "ecmaVersion": 2018,
  "sourceType": "module"
  ,

一堆自定义规则。我还为 TypeScript 支持安装了以下依赖项：

  "@typescript-eslint/eslint-plugin": "^1.7.0",
  "@typescript-eslint/parser": "^1.7.0",

然而，ESLint 最有用的规则之一，https://eslint.org/docs/rules/no-unused-vars，似乎对 TypeScript 项目的配置很差。例如，当我导出一个枚举时，该规则会警告我该枚举未在声明它的文件中使用：

export enum Foo 
   Bar,

同样，当我导入要用作类型的接口或类时，'no-unused-vars' 会在实际导入的行再次报错：

在 Foo.ts 中

export interface Foo 
   bar: string;

在 bar.ts 中

import  Foo  from './Foo'
const bar: Foo =  bar: 'Hello' ;

有没有办法配置 no-unused-vars 规则来考虑这两种情况？我不喜欢禁用该规则，因为它是我的整个规则集中在这些情况之外最有用的规则之一。

我已经将规则降级为只给出警告而不是错误，但是让我的所有文档都充满警告仍然有点违背使用 esLint 的目的。

按照here 的建议使用 //eslint-disable-line 填充我的所有文档似乎也是一个糟糕的解决方案。

【问题讨论】：

es lint 好像没有正确配置。尝试卸载并再次在你的包中添加 eslint。

如果是这种情况，我会感到惊讶，因为即使在重新安装 esLint 之后（以及在开始全新的项目时）我也会遇到同样的问题。我以为每个人都有相同的经历，但也许这是由我扩展 esLint 设置的规则集之一引起的？

【参考方案1】：

parser 嵌套在 parserOptions 中。它应该是兄弟，像这样：

"parser": "@typescript-eslint/parser",
"parserOptions": 
    "ecmaVersion": 2018,
    "sourceType": "module"
,

至于no-unused-vars，恐怕这是@typescript-eslint 的一个持续错误： https://github.com/typescript-eslint/typescript-eslint/issues/363

【讨论】：

啊，我的错。我实际上在规则集中的某个地方使用了 plugin:vue 解析器，但我没想到要指定它。根据eslint.vuejs.org/user-guide/#usage，在parserOptions.parser下指定@typescript-eslint/parser是有效的。我很高兴听到这是一个已知的错误。我找不到太多关于它的信息，而且由于它似乎是一个常见的用例，我只是假设我做错了什么。非常感谢！

【参考方案2】：

它有点隐藏在the documentation 中，但是如果你在'extends' 属性中添加一些东西，你可以使用ESLint 推荐的规则，比如no-unused-vars，并让它在Typescript 中实际工作。像这样：

"extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],

@typescript-eslint/recommended 似乎是允许 eslint:recommended 有效处理 Typescript 构造的东西。但不确定它会如何影响您的其他扩展。

【讨论】：

是的，这似乎可以解决问题。正如你所说，它确实与我的其他一些扩展相冲突，但一旦我有时间进行实验，我应该能够弄清楚这一点。非常感谢！

订单对我来说很重要。确保"plugin:@typescript-eslint/recommended" 在其他扩展之后

VS Code，使用 eslint，在函数回调的类型声明中给了我关于未使用变量的警告。这些选项，添加到我的 .eslintrc.js 中为我解决了所有问题。

我觉得这个答案已经过时了。我已经在extends 的eslintrc.json 部分中有"plugin:@typescript-eslint/recommended"，所以我以正确的顺序添加了"eslint:recommended" 和"plugin:@typescript-eslint/eslint-recommended"，但是eslint 仍然无法检测到vscode 正在检测的未使用的var 错误。使用@jaibatrik 的解决方案或@ghiscoding 的更新解决方案是有效的。

@kimbaudi +1 它也不会让我做打字稿忽略注释行。我开始认为 typescript 比它值得保存更麻烦（至少对于反应而言）

【参考方案3】：

我认为"plugin:@typescript-eslint/eslint-recommended" 的使用引入了一堆不需要的规则。使用"@typescript-eslint/no-unused-vars" ESLint 规则可能会更好。

  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": 
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
  

参考 - https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md

【讨论】：

这应该是当前公认的解决方案。为no-unused-vars 和@typescript-eslint/no-unused-vars 添加规则对我有用。接受的解决方案未检测到未使用的 var 错误。

【参考方案4】：

我在最新的 TypeScript/ES-Lint 版本中遇到了很多错误错误，我发现他们提出了一个实验规则来修复已损坏的 no-unused-vars，并且使用实验规则 @typescript-eslint/no-unused-vars-experimental 它最终可以像我一样工作期待它。

在我进行更改之前，我在使用接口/类型时遇到了多个错误错误，说这些变量未使用（当然它们永远不会被使用，因为它们不是变量而是接口/类型）。 .. 如果您对代码本身感到好奇，这里是 PR 添加此实验规则，这就是我找到规则的方式。

这是我更新的.eslintrc 文件的子集

  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": 
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars-experimental": "error",
    "no-unused-vars": "off"
  

我现在终于恢复正常了:)

编辑（2021 年 1 月）

正如 Brad（项目的维护者）在下面的评论中所提到的，这是（曾经）一个临时解决方案，现在已弃用。根据他的评论（如下），我们现在可以直接使用 @typescript-eslint/no-unused-vars 来实现相同的预期行为。感谢布拉德提供的信息。我还可以确认切换回@typescript-eslint/no-unused-vars 现在对我有用（我更新了我的代码，现在一切都很好）。

这不是要走的路，你应该避免它。 @typescript-eslint/no-unused-vars-experimental 已弃用，并将在下一个专业中删除。更新到最新版本的工具并使用@typescript-eslint/no-unused-vars。来源：我是项目的维护者。

自 2021 年 1 月以来的更新答案

所以这是我的 .eslintrc 文件的最新更新，它适用于我 :)

  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": 
    "@typescript-eslint/no-unused-vars": "error",
    "no-unused-vars": "off"
  

【讨论】：

这是唯一对我有用的解决方案。我将 xo 与 Typescript 一起使用，并不断收到所有 no-unused-vars 错误。

这对我有用，但这是来自 eslint/typescript-eslint 家伙的糟糕解决方案。当您尝试声明函数类型时，这是一个可怕的错误

我在 Node 上，这是唯一适用于 typescript linting false 未使用变量枚举和构造函数定义属性的解决方案

这不是要走的路，你应该避免它。 @typescript-eslint/no-unused-vars-experimental 已弃用，将在下一个专业版中删除。更新到最新版本的工具并使用@typescript-eslint/no-unused-vars。来源：我是项目的维护者。

@BradZacher 不幸的是，我仍然遇到同样的问题，即作为返回类型的导入接口会触发此规则。我正在使用以下版本：“@typescript-eslint/eslint-plugin”：“4.14.1”，“@typescript-eslint/parser”：“4.14.1”，“eslint”：“7.18.0”，

【参考方案5】：

我的问题是使用装饰器并希望有一个具有适当名称的变量以清楚起见，例如：

@OneToMany((type) => Employee) 而不是@OneToMany(() => Employee)

TypeScript 通常的解决方案是在前缀下划线：

@OneToMany((_type) => Employee)

并且可以让 ESLint 接受同样的：

.eslintrc.js

module.exports = 
  ...
  rules: 
    '@typescript-eslint/no-unused-vars': ['warn',  'argsIgnorePattern': '^_' ]
    ....
  ,
;

【参考方案6】：

几年后仍然遇到同样的错误。尝试检查它为什么不起作用是令人沮丧的。在尝试了很多可能的配置之后，终于为我工作了。以防有人像我一样遇到困难！

eslintrc.js

module.exports = 
    env: 
        browser: true,
        node: true,
    ,
    parser: "@typescript-eslint/parser",
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "prettier",
        "plugin:prettier/recommended",
        "plugin:@typescript-eslint/recommended",
    ],
    parserOptions: 
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        project: "tsconfig.eslint.json",
        tsconfigRootDir: __dirname,
        sourceType: "module", // Allows for the use of imports
    ,
    plugins: ["@typescript-eslint", "@typescript-eslint/tslint", "import", "unused-imports"],

    rules: 
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars-experimental": "error",
        "no-unused-vars": "off",
        "import/order": "error",
        "no-console": ["warn",  allow: ["warn", "error"] ],
        eqeqeq: ["error", "always"],
        "no-else-return": "error",
    ,
    settings: 
        "import/resolver": 
            node: 
                extensions: [".js", ".jsx", ".ts", ".tsx"],
                moduleDirectory: ["node_modules", "src/"],
            ,
        ,
    ,
;

【参考方案7】：

将 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 从 3.x 升级到最新的 4.x 为我解决了这个问题。