在前端开发中，除错是极其重要的一项技能。但是，即使经验丰富的开发人员也会犯错。为提高代码的质量以及开发人员的效率，可以使用 ESLint 进行代码校验，ESLint 能够正确的发现代码中的错误，并提供修复方案。
什么是 ESLint？
ESLint 是一个用于 JavaScript 的开源代码检查工具，它可以识别出 JavaScript 代码中的问题，并提供自定义规则的能力。它支持 ECMAScript 6 和 JSX 语法。ESLint 除了可以进行纯 JavaScript 代码的检查，还可以与各种工具链或者编辑器集成，进行必要性质量的提高。
什么是 Typescript？
Typescript 是由微软开发的一种为大型应用程式及转译JavaScript的开源编程语言。Typescript 为 JavaScript 提供了强类型检查功能以及更完善的环境支持。它允许开发人员使用完整的 ECMAScript 标准特性，如装饰器和命名空间等，同时还能兼容许多浏览器。这些特点使 Typescript 成为现代 Web 开发中不可或缺的一部分。
工作原理
通过 ES2015 的语法 import 和 export 的方式来加载 Typescript 代码，并使用 typescript-eslint-parser 对代码进行解析，解析完成后使用 ESLint 进行校验及错误提示。
安装
在安装 Typescript 项目中，建议通过 yarn 或者 npm 来进行安装依赖及插件的安装。
$ yarn add -D typescript eslint eslint-config-typescript $ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
配置文件
在 Typescript 项目中，ESLint 配置文件依然是 .eslintrc.js 文件，但是需要添加额外的规则以支持 Typescript 代码的检查。
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------------------------
------------------------------
--
------- ----------------------------
-------- ---------------------- ------------
------ -
-------------------- --------
---------------------------------------------------- ------
------------------------------------- ------
--
--在该配置文件中，我们做了以下几个工作：
- 引入了
@typescript-eslint/parser，使用该解析器来解析 Typescript 代码。 - 使用了
@typescript-eslint/eslint-plugin来支持 Typescript 语法的规则集。 - 开启了
prettier代码格式化插件，并设置了eslint-config-prettier中的prettier/prettier规则。 - 关闭了一些不必要的警告，比如调用函数时不允许传入
any类型的参数等。
使用
完成了以上的配置后，ESLint 就可以通过 eslint 命令来校验 Typescript 代码了：
$ eslint --ext .ts ./
除了使用命令行进行校验，还可以通过编辑器插件的方式来提供即时的代码检验即可。
总结
ESLint 是前端项目中必不可少的一项技术，它可以帮助我们发现代码中的错误及优化建议。对于 Typescript 项目而言，通过添加对应的规则集，就使用可以使用 ESLint 来校验 Typescript 代码了。使用 ESLint 能够提供代码质量，提高开发效率，让我们的代码更加健壮和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bc59448841e9894887023