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

同样，当我导入要用作类型的接口或 class 时，“no-unused-vars”将在实际导入的行再次抱怨：

脚下

export interface Foo {
   bar: string;
}

在 bar.ts

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

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

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

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

Answer 1

它有点隐藏在文档中，但是如果你在 '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

对我来说也适用于规则/ eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }] /
你可以在你的.eslintrc.json文件中添加它（这个是为了忽略所有以大写字母开头的字符串）

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

有关更多信息和属性，您可以查看此链接。

Answer 8

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

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

Answer 9

对于任何希望在使用YAML配置（例如.eslintrc.yaml ）时在 TypeScript 中正常工作的人来说，它看起来像这样：

rules:

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

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

Answer 10

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

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

Answer 11

简短的回答

我在这个链接中找到了一个很好的解决方案： Unused variables in eslint