ESLint-为 TypeScript 配置“无未使用变量”

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

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

  • a bunch of custom rules. I've also installed the following dependencies for TypeScript support:

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

However, one of ESLint's most useful rules, https://eslint.org/docs/rules/no-unused-vars, seems to be very poorly configured for TypeScript projects. For example, when I export an enum, the rule warns me that the enum isn't in use in the file where it is declared:

export enum Foo {
Bar,
}

类似地，当我导入一个要用作类型的接口或类时，‘ no-used-vars’会在实际导入的行中再次出现问题:

脚

export interface Foo {
bar: string;
}

在酒吧

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

Is there any way to configure the no-unused-vars rule to take these two cases into account? I'm not a fan of disabling the rule, as it is one of the most helpful rules in my entire ruleset outside of these cases.

I've already downgraded the rule to only give a warning instead of an error, but having all my documents filled with warnings still kind of defeats the purpose of using esLint.

像建议的 给你那样，用//eslint-able-line 填充我所有的文档似乎也是一个糟糕的解决方案。

129432 次浏览
小开

你有 parser嵌套在 parserOptions里面。它应该是一个兄弟姐妹，像这样:

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

As for no-unused-vars, I'm afraid this is an ongoing bug with @typescript-eslint: Https://github.com/typescript-eslint/typescript-eslint/issues/363

小开
最佳答案

它有点隐藏在 文件中，但是如果您向‘ tended’属性添加一些内容，那么您可以使用 ESLint 推荐的规则，比如 no-used-vars，并且让它实际上在 Typecript 中工作。像这样:

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

@ type escript-eslint/ 推荐使用 eslint:  推荐使用它來有效地處理 typecript 的結構。不知道这会不会影响你其他的分机。

小开

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

小开

最新的 TypeScript/ES-Lint 版本出现了很多错误，我发现他们提出了一个实验规则来修复坏掉的 no-unused-vars，而实验规则 @typescript-eslint/no-unused-vars-experimental最终像我期望的那样工作。

在更改之前，我在使用接口/类型时出现了多个错误，说这些 var 没有被使用(当然，它们永远不会被使用，因为它们不是变量，而是接口/类型) ... ... 如果你对代码本身感到好奇，这里是 公关添加了这个实验规则，这就是我如何发现这个规则的。

这是我更新的 .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"
}
}

and I'm now finally back to normal :)

编辑(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"
}
}
小开

我的问题在于使用修饰符和希望拥有一个具有适当名称的变量，以保证清晰度，例如:

@OneToMany((type) => Employee) instead of @OneToMany(() => Employee)

TypeScript 的通常解决方案是使用下划线作为前缀:

@OneToMany((_type) => Employee)

而且有可能让 ESLint 接受同样的结果:

.eslintrc.js

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

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

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

Upgrading @typescript-eslint/eslint-plugin and @typescript-eslint/parser from 3.x to the latest 4.x resolved the issue for me.

小开

也为我的作品规则 < strong >/< em > eslint no-used-vars: [“ error”，{“ varsIgnorePattern”: “[ iI ] gnored”}]/
你可以像这样在你的 。 eslintrc.json文件中添加它(这个是为了忽略所有以大写字母开头的字符串)

    "rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^[A-Z]"
}
],
}

有关更多信息和属性，可以检查 这个链接。

小开

对于那些希望在使用 YAML配置(例如 .eslintrc.yaml)时能够在 TypeScript 中正常工作的非未使用 vars 的人来说，它看起来是这样的:

rules:


"@typescript-eslint/no-unused-vars":
- warn
- argsIgnorePattern: "^_"                # <-- NOTE!
varsIgnorePattern: "^_"
caughtErrorsIgnorePattern: "^_"


no-unused-vars: # disabled but see typescript-eslint/no-unused-vars
- off
...
小开

我使用这个配置，它正常工作

{
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"extends": ["airbnb-base", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "jest"],
"rules": {
"import/extensions": "off",
"@typescript-eslint/no-unused-vars": ["error"]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}

提交答案