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

Question

我在所有 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 填充我的所有文档似乎也是一个糟糕的解决方案。

Answer 1

它有点隐藏在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 构造的东西。不过不确定它会如何影响您的其他扩展。

Answer 2

我认为"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

Answer 3

我在最新的 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"
  }
}

Answer 4

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

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

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

@OneToMany((_type) => Employee)

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

.eslintrc.js

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

Answer 5

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

Answer 6

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

Answer 7

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

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/"],
            },
        },
    },
};