ESLint 是一个非常流行的 JavaScript 代码检查工具。它可以帮助我们在编写代码的过程中发现潜在的问题，从而提高代码的质量。在 TypeScript 逐渐成为前端开发的主流语言之后，让 ESLint 支持 TypeScript 也变得越来越重要。在本文中，我们将介绍如何让 ESLint 支持 TypeScript。
安装 TypeScript 和 ESLint
首先，我们需要安装 TypeScript 和 ESLint。在安装 TypeScript 之前，你需要先安装 Node.js 和 npm。在安装完 Node.js 和 npm 之后，你可以使用以下命令来安装 TypeScript 和 ESLint：
npm install typescript eslint --save-dev
配置 TypeScript
在配置 TypeScript 之前，我们需要先创建一个 tsconfig.json 文件。在这个文件中，我们可以配置 TypeScript 编译器的选项。以下是一个示例 tsconfig.json 文件：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
}
}在这个示例中，我们配置了 TypeScript 编译器的目标为 ES5，模块系统为 CommonJS，启用了严格模式。
配置 ESLint
接下来，我们需要配置 ESLint。我们可以使用 eslint --init 命令来创建一个 .eslintrc.json 文件，这个文件中包含了 ESLint 的配置选项。在创建 .eslintrc.json 文件时，我们可以选择使用哪种格式来配置 ESLint。以下是一个示例 .eslintrc.json 文件：
-- -------------------- ---- -------
-
--------- ----------------------------
---------- -----------------------
---------- -
---------------------
----------------------------------------
------------------------------
-----------------------------
--
-------- -
--------------------------------------------------- -----
-
-在这个示例中，我们使用了 @typescript-eslint/parser 来解析 TypeScript 代码。我们还使用了 @typescript-eslint 插件来扩展 ESLint 的功能，以支持 TypeScript。我们还使用了一些预定义的规则，如 eslint:recommended、@typescript-eslint/recommended、prettier/@typescript-eslint 和 plugin:prettier/recommended。这些规则可以帮助我们检查代码中的潜在问题，如未使用的变量、未定义的变量等。最后，我们还可以在 rules 中定义自己的规则，以适应我们的项目需求。
配置 VS Code
最后，我们需要配置 VS Code，以便在编辑 TypeScript 代码时自动检查代码。我们需要安装 eslint 和 @typescript-eslint/eslint-plugin 插件，并在 VS Code 的设置中启用 ESLint：
-- -------------------- ---- -------
-
--------------------------- -
----------------------- ----
--
-------------------------- -----
------------------ -
-------------
------------------
-------------
-----------------
-
-在这个示例中，我们启用了 editor.codeActionsOnSave 选项，以便在保存文件时自动修复 ESLint 的问题。我们还启用了 eslint.alwaysShowStatus 选项，以便在状态栏中显示 ESLint 的检查结果。最后，我们还配置了 eslint.validate 选项，以便在编辑 JavaScript 和 TypeScript 代码时自动检查代码。
示例代码
以下是一个示例 TypeScript 代码：
const hello = (name: string): void => {
console.log(`Hello, ${name}!`);
};
hello("world");在这个示例中，我们定义了一个函数 hello，它接受一个字符串参数 name，并打印出 Hello, ${name}! 的字符串。我们还调用了这个函数，并传入了一个字符串参数 "world"。
在使用 ESLint 检查这个代码时，我们可以发现函数 hello 没有显式地声明返回类型，这可能会导致一些潜在的问题。我们可以通过在 .eslintrc.json 文件中添加规则 @typescript-eslint/explicit-function-return-type 来解决这个问题。
总结
在本文中，我们介绍了如何让 ESLint 支持 TypeScript。我们首先安装了 TypeScript 和 ESLint，然后配置了 TypeScript 和 ESLint。最后，我们还配置了 VS Code，以便在编辑 TypeScript 代码时自动检查代码。希望这篇文章能够帮助你更好地使用 ESLint 和 TypeScript。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc3e501886fbafa498e661