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