引言
在前端开发中，使用 ESLint 来规范代码是很常见的做法。而在使用 TypeScript 进行开发的时候，由于 TypeScript 自带静态类型检查，使用 ESLint 往往会出现重复检查或者冲突的情况。本文将介绍如何使用 ESLint 与 TypeScript 进行配合，并通过 TypeScript-lint 添加自定义规则来优化代码质量。
配置 ESLint
首先，需要安装 ESLint 和 TypeScript lint。可以使用 npm 进行安装：
npm install --save-dev eslint typescript eslint-config-typescript
然后，在项目根目录创建 .eslintrc.json 文件，进行 ESLint 配置：
-- -------------------- ---- -------
-
------- -----
------ -
---------- ----
--
--------- ----------------------------
---------- -
----------------------------------
--
---------- -
---------------------
---------------------------------------
--
-------- -
--------- --------- ---
--------- --------- ----------
------- --------- ---------
-
-以上配置文件包含了以下内容：
root表示 ESLint 将从当前文件夹开始寻找配置文件，以此作为根目录。env表示代码在什么环境下执行，这里设置为浏览器环境。parser表示使用何种语法分析器，这里使用@typescript-eslint/parser。plugins表示使用何种插件，这里使用@typescript-eslint/eslint-plugin。extends包含了多个 eslint 配置，其中包含了 TypeScript 的 ESLint 配置。rules表示自定义规则。
自定义规则
通过自定义规则，我们可以提高代码的质量和可读性，使得代码更加规范化，并且能够在团队中统一代码风格。在 TypeScript-lint 中，我们可以使用一些自定义规则来满足特定需求。
以 no-useless-constructor 为例，它是 TypeScript-lint 内置的一条规则，表示禁止使用无用的构造函数。我们可以找到这个规则的文档，并配置它来优化我们的代码：
{
"rules": {
"no-useless-constructor": "error"
}
}在这个例子中，我们将该规则设置为 “error”，表示需要严格遵守规则，一旦有无用的构造函数，将会报错。
生动实例
为了说明在实际项目中 ESLint 与 TypeScript 的配合使用，我们来通过一个例子进行说明。
首先，新建 index.ts 文件，并引入 React 和 ReactDOM：
import * as React from "react"
import * as ReactDOM from "react-dom"
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById("root")
)运行 eslint index.ts 命令，控制台将返回以下错误提示：
1:1 error Parsing error: JSX element 'h1' has no corresponding closing tag ✖ 1 problem (1 error, 0 warnings)
因为我们使用了 JSX 语法，而 ESLint 并未识别 JSX 语法。所以我们需要将 ESLint 的 parser 配置为 @typescript-eslint/parser，添加 TypeScript-lint 的相关规则。
更新 .eslintrc.json 配置文件如下：
-- -------------------- ---- -------
-
------- -----
------ -
---------- ----
--
--------- ----------------------------
---------- -
----------------------------------
--
---------- -
---------------------
----------------------------------------
---------------------------------------------------------------
--
-------- -
--------- --------- ---
--------- --------- ----------
------- --------- ----------
-------------------------- --------- ----------
--------------------------------- --------- ------- - ------------------ ----- ---
---------------------------- --------- ----------
---------------------------- --------- ---
------------------------------------- --------- - ----------------- ---- ---
-------------------------------------------- -------
-
-重新运行 eslint index.ts 命令，控制台将返回以下错误提示：
1:21 error 'React' is defined but never used @typescript-eslint/no-unused-vars 2:22 error 'ReactDOM' is defined but never used @typescript-eslint/no-unused-vars ✖ 2 problems (2 errors, 0 warnings)
由于上述代码中并未使用 React 和 ReactDOM，所以 TypeScript-lint 提示我们可以删除这两个变量。
修改 index.ts 如下：
-- -------------------- ---- ------- ------ - -- ----- ---- ------- ------ - -- -------- ---- ----------- ----- --- - -- -- --------- ----------- ---------------- ---- --- ------------------------------- -
再次运行 eslint index.ts，已经不会有任何提示。
总结
通过上述示例，我们看到 ESLint 和 TypeScript 能够完美地配合使用，并且通过自定义规则，可以提高我们的代码质量。通过使用 TypeScript-lint 的自定义规则，我们可以自定义特定的规则，以期达到更好的代码可读性和规范化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64967c2248841e98943a7130