这篇文章将介绍如何在TypeScript项目中使用ESLint以及它的好处。
了解对ESLint的需求
Linting是寻找有问题的模式或不遵守特定风格准则的代码的过程。提示工具可以在代码编辑器和CI管道中使用，以强制源代码库中的代码具有高质量、可读性。
ESLint是一个流行的JavaScript提示工具，能够对TypeScript进行提示。
TypeScript编译器包括一些代码质量的选项，如noUnusedLocals 和noUnusedParameters ，那么为什么我们需要一个单独的工具，如ESLint？嗯，虽然TypeScript编译器能够进行一些代码质量检查，但ESLint能够进行更多的检查。
那TSLint呢？- 这不是一个专门针对TypeScript的linter吗？嗯，是的，TSLint是TypeScript专用的linter，但它现在已经废弃了。
将ESLint添加到TypeScript项目中
要将ESLint添加到TypeScript项目中，我们需要安装eslint npm包：
npm install --save-dev eslint
我们需要几个额外的包来让ESLint与TypeScript一起工作：
@typescript-eslint/parser:这将解析TypeScript的代码，以获得提示。@typescript-eslint/eslint-plugin:这包含了TypeScript代码的一些标准提示规则。
我们可以按如下方式安装这些npm包：
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
配置ESLint
ESLint可以配置在项目根部的一个文件中。该文件可以是JavaScript、JSON或YAML格式，可以有几个不同的名字，如.eslintrc.json 。
下面是一个TypeScript项目的.eslintrc.json 文件的配置例子：
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"plugin:@typescript-eslint/recommended"
]
}
我们已经告诉ESLint使用TypeScript解析器来读取代码，并从我们刚刚安装的软件包中获得一组推荐规则。
运行ESLint
我们可以创建一个npm脚本，在package.json 中运行ESLint：
"scripts": {
...
"eslint": "eslint src/**"
},
我们已经告诉ESLint要检查我们项目中src 文件夹中的所有文件。
然后我们运行我们的eslint npm脚本，如下所示:
npm run eslint
然后，ESLint将报告任何问题:
下面是已经确定的有问题的代码行:
const form = document.querySelector("form")!;
ESLint警告说，在这一行的末尾使用了非空断言操作符(!)。推荐的规则建议不要使用非空断言操作符。
如果我们确定表达式不可能是null 或undefined ，那么我们可以用注释来抑制这一行的规则:
const form = document.querySelector("form")!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
一个更安全的方法是删除非空断言运算符，在我们引用form 后使用可选的链式运算符(?):
const form = document.querySelector("form");
form?.addEventListener("submit", submitHandler);
如果我们重新运行ESLint，它将不再报告这个警告。
很好!
总结
ESLint能够对TypeScript进行全面的代码质量检查，是TypeScript代码的推荐linter。ESLint是高度可配置的，可以调整以满足特定项目的要求。
