如何配置 ESLint 检查 TypeScript 项目
ESLint 是一个用于检查 JavaScript 代码的工具，可以帮助我们找出代码潜在的错误，并遵循一致的代码风格。当使用 TypeScript 開發项目时，我们也可以使用 ESLint 来检查 TypeScript 代码。本文将介绍如何配置 ESLint 检查 TypeScript 项目，让你的代码更可靠和风格一致。
准备工作
在开始配置之前，你需要确保你已安装了以下软件：
- Node.js：我们需要使用 Node.js 运行一些命令
- TypeScript：我们需要使用 TypeScript 编译 TypeScript 代码
- ESLint：我们需要安装 ESLint 以及一些与 TypeScript 相关的插件
安装 ESLint
首先，我们需要全局安装 ESLint：
--- ------- -- ------
如果安装成功，可以使用以下命令查看版本号：
------ --
安装 TypeScript 插件
要让 ESLint 支持 TypeScript 代码，我们需要安装 TypeScript 相关的插件。以下是我们需要安装的插件：
- @typescript-eslint/parser：将 TypeScript 转换成 ESTree 抽象语法树
- @typescript-eslint/eslint-plugin：添加一些与 TypeScript 代码相关的规则
安装这两个插件：
--- ------- ---------- ------------------------- --------------------------------
现在我们已经准备就绪，接下来我们就可以开始配置 ESLint 了。
配置 .eslintrc 文件
我们的主要任务是配置 .eslintrc 文件。这个文件告诉 ESLint 那些规则需要应用于你的 TypeScript 代码。
在项目的根目录下新建一个 .eslintrc 文件，内容如下：
-
--------- ----------------------------
---------------- -
-------------- --
------------- ---------
---------- -----------------
--
---------- -
---------------------------------------
--
---------- -
--------------------
--
-------- -
-- -----------
-
-让我们逐一解释每一个属性。
-
--------- ----------------------------
---------------- -
-------------- --
------------- ---------
---------- -----------------
--
---------- -
---------------------------------------
--
---------- -
--------------------
--
-------- -
-- -----------
-
-"parser": "@typescript-eslint/parser": 指定使用 @typescript-eslint/parser 来解析 TypeScript 代码。"parserOptions": {...}: 指定 parserOptions，告诉 ESLint 如何解析代码。这里我们使用了 TypeScript 的配置文件 tsconfig.json，并设置了 ecmaVersion 为 6，sourceType 为 module。"extends": ["plugin:@typescript-eslint/recommended"]: 继承自 @typescript-eslint/recommended，这是一个默认的规则集，包含了一些比较常用的规则。"plugins": ["@typescript-eslint"]: 引入 @typescript-eslint 插件，以便使用 TypeScript 相关的规则。"rules": {...}: 在这里可以添加你想要的规则。
配置 TypeScript 规则
现在，我们可以添加一些 TypeScript 相关的规则。以下是一些常见的规则：
-
-------- -
--------------------------------------------------- --------
--------------------------------------------------- --------
------------------------------------- --------
------------------------------------------ --------
------------------------------------ -------
-
-@typescript-eslint/explicit-member-accessibility：强制显式访问控制修饰符。这使得你必须明确你的字段和方法是否是公开(public)、私有(private)或受保护(protected)。@typescript-eslint/explicit-function-return-type：强制函数必须书写返回类型。这有助于避免在函数返回值上发生错误。@typescript-eslint/no-explicit-any：禁止使用类型为 any 的变量和参数。这将强制 TypeScript 进一步检查您的代码。@typescript-eslint/no-use-before-define：在定义前禁止使用变量。这确保了你不会在变量定义之前引用变量。@typescript-eslint/no-unused-vars：在使用变量之前检查变量是否有声明。这将避免未使用的变量在代码中存在。
尝试一下
现在，我们已经完成了配置，试试让 ESLint 规范你的代码。你可以在命令行上使用以下命令：
------ ----- --- ----
这将检查项目中所有的 .ts 文件，如果有任何代码与规则不符，将会输出错误。如果有任何意外的行为，可以尝试按照文档逐步排查问题。
结论
ESLint 是一个可配置的工具，可以帮助我们检查 TypeScript 代码的质量，并获得更好的代码风格。在本文中，我们了解了如何配置和使用 ESLint 来检查 TypeScript 代码，并介绍了一些基本的规则来使代码更健壮和可读。当使用 ESLint 时，我们可以大大提高代码的质量，并减少潜在的错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67370c79317fbffedf07ae41