在日常前端开发中，我们都知道代码质量是非常重要的。代码中存在错误和漏洞可能造成严重的后果。因此，代码检测工具是必不可少的。ESLint 是一款流行的代码检测工具，它可以检测 JavaScript 中的语法错误和潜在的隐患。另外，ESLint 也支持 TypeScript 代码检查。在本文中，我们将介绍如何使用 ESLint 对 TypeScript 代码进行检查。
安装 ESLint
首先，我们需要安装 ESLint。在项目根目录下执行以下命令即可安装 ESLint：
npm install eslint --save-dev
当安装完成后，我们需要配置 ESLint。
配置 ESLint
创建一个 .eslintrc.js 文件，在其中添加以下代码：
-- -------------------- ---- -------
-------------- - -
----- -----
------- ----------------------------
-------- -
--------------------
--
-------- -
---------------------
---------------------------------------
--
------ -
------------------------------------- -----
-
--让我们快速了解这个配置文件：
root: 指定 ESLint 根目录。parser: 指定 parser，这里使用@typescript-eslint/parser来解析 TypeScript 代码。plugins: 指定 ESLint 插件。extends: 指定所需的 ESLint 配置，这里使用eslint:recommended和plugin:@typescript-eslint/recommended。rules: 指定规则，这里使用@typescript-eslint/no-explicit-any: 'off'将取消 TypeScript 中any的警告。
可以根据情况修改相应的配置。
配置编辑器
我们使用 VS Code 编辑器，因此我们需要在 VS Code 中配置 ESLint。
首先，我们需要安装 ESLint 插件，并在 .vscode/settings.json 中添加以下代码：
{
"eslint.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}添加这个配置后，每次保存文件时，ESLint 将自动修复一些语法错误。这显然可以减少大量手动修复的工作量。
使用 ESLint 检查 TypeScript
我们已经成功地配置了 ESLint，现在开始使用 ESLint 检查 TypeScript 代码。
我们来编写一段 TypeScript 代码：
class Foo {
bar(): void {
console.log('Hello World!');
}
}
new Foo().bar();运行 eslint app.ts 后，我们可以看到如下输出：
1:1 error Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. ✖ 1 problem (1 error, 0 warnings)
这是由于我们尝试在没有配置任何 TypeScript 相关解析器选项情况下使用 @typescript-eslint/parser。
我们在 .eslintrc.js 文件中添加 parserOptions 配置项：
module.exports = {
...
parserOptions: {
project: './tsconfig.json'
},
...
};然后在项目根目录下创建一个 tsconfig.json 文件：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}再次运行 eslint app.ts 后，我们可以看到代码通过了检查。这告诉我们，ESLint 确实可以用来检查 TypeScript 代码。
总结
在本文中，我们详细地介绍了如何使用 ESLint 来检查 TypeScript 代码。我们了解了如何安装和配置 ESLint，以及如何在编辑器中配置 ESLint。如果你正在使用 TypeScript 开发项目，那么推荐你使用 ESLint 这个工具来检查你的代码，以确保代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b2c83968c7c53b0a96cf3