随着 TypeScript 在前端领域的不断流行，我们越来越需要一个可靠的检查工具来保证我们的代码质量和规范。ESLint 是一个很好的选择，它可以对代码进行静态分析，找出其中的错误和潜在问题，并帮助我们在代码编辑器中快速发现问题。在本文中，我们将介绍如何使用 ESLint 在 TypeScript 项目中识别未使用的变量。
安装与配置 ESLint
首先，我们需要安装 ESLint：
npm install eslint --save-dev
然后，我们需要在项目的根目录下创建一个 .eslintrc.json 文件，并将以下配置添加到其中：
-- -------------------- ---- ------- - ------- ----- ------ - ---------- ----- --------- ---- -- --------- ---------------------------- ---------- - --------------------- ------------------------------ -- ---------- - --------------------- --------------------------------------- -- -------- - ----------------- ------ -------------------------------------- ------- - -展开代码
上面的配置主要包括以下几个方面：
root：指定 ESLint 配置文件的根目录为项目的根目录。env：指定我们的代码将运行在浏览器环境中，并支持 ES2021。parser：使用@typescript-eslint/parser来解析 TypeScript 代码。plugins：我们需要用到@typescript-eslint和eslint-plugin-unused-imports两个插件。extends：我们需要继承eslint:recommended和plugin:@typescript-eslint/recommended两个规则集。rules：我们需要将 ESLint 的默认规则no-unused-vars关闭，并启用eslint-plugin-unused-imports提供的规则来识别未使用的变量。
配置 VS Code
接下来，在 VS Code 中打开项目，并安装 eslint 插件，我们还需要在项目的根目录下添加一个 .vscode/settings.json 文件，并将以下配置添加到其中：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
上面的配置中，我们启用了在保存文件时自动修复 ESLint 错误的功能。
检查未使用的变量
完成上述配置后，我们就可以开始检查未使用的变量了。在 TypeScript 代码中，我们经常定义一些接口、类型别名、枚举等类型，这些类型可能并不直接被使用，但也不应该被删除。此时如果直接使用 ESLint 的默认规则，很容易就会误报未使用的变量。所以，我们需要使用 eslint-plugin-unused-imports 提供的规则来进行检查和过滤。
示例代码：
-- -------------------- ---- ------- --------- ----- - ----- ------- ---- ------- - ---- -------- - -------- ---- ------ - ---- - ------- ------ - -------- - ----- --------- -------- - - - ----- ------ ---- -- - -- -------- -------------- -------- - ------ --------- -展开代码
在上面的示例代码中，我们定义了一个简单的数据结构 IUser，并使用了一个类型别名 UserList。同时，我们还定义了一个枚举 Gender，并在函数 getUserList 中使用数组 userList。此时，如果我们使用默认的 no-unused-vars 规则进行检查，会发现所有的变量都被标记为未被使用。但是，实际上我们并没有删除任何有用的代码。
所以，我们需要使用 eslint-plugin-unused-imports 提供的规则来过滤掉这些被误报的变量。这个规则名为 unused-imports/no-unused-imports-ts，我们只需要将其添加到 .eslintrc.json 的 rules 中，就可以启用它了。此时，如果我们保存文件，就会发现被误报的变量已经不再出现了。
总结
在本文中，我们介绍了如何使用 ESLint 在 TypeScript 项目中识别未使用的变量。具体来说，我们安装了 ESLint，并配置了相关的项目文件和 VS Code 设置；然后，我们使用 eslint-plugin-unused-imports 提供的规则来过滤掉被误报的变量。这个过程可以帮助我们保证代码的质量和规范，从而提高项目的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652fe5387d4982a6eb12087a
