使用 TSLint 还是 ESLint？
前言
在前端开发的过程中，代码质量的管理一直以来都是开发者不可忽视的重要环节之一。为了达到代码规范化管理的目的，代码检查工具横行天下，它们能够及时发现代码潜在的问题，并提示修正。
但是，前后端开发的语言不同，前端开发的需求更加复杂，就导致了单纯使用一个通用性的代码检测工具解决不了问题。在 TypeScript 与 JavaScript 结合使用的情况下，我们会有多种代码检测工具可供选择，其中最常见的就是 TSLint 和 ESLint 了。那么，在选用代码检测工具的时候两者的区别是什么呢？本文将共同探讨 TSLint 和 ESLint 的使用，以及二者之间的优缺点，带你全面了解并选择更加合适的代码检测工具。
TSLint（TypeScript Lint）
TSLint 是从 ESLint 中分离出来的，是一个基于 TypeScript 的代码检测工具。它主要用于检测 TypeScript 代码中的语法错误、代码风格问题以及代码安全问题。
TSLint 使用配置文件 tslint.json 来配置检查规则，以便开发者可以自定义编码风格。同时，它支持结合 Visual Studio Code 等编辑器实现对 TypeScript 的代码风格检查，而且对于修正代码错误或规范问题也提供了很好的支持。
TSLint 常见的配置项包括：
"rules"：指定需要检测的规则以及检测规则的配置，例如"max-line-length"检查最大行长度，"comment-format"检查注释规范等；"extends"：继承其他的规则配置，例如"tslint-config-airbnb"；"exclude"：指定忽略检测的文件或文件夹。
下面是一个简单的 tslint.json 配置：
-- -------------------- ---- -------
-
---------- -----------------------
-------- -
----------------- -----
------------- ------
--------- ------ --------- ---
------------ ------ ---------
-
-这个配置同时继承了 tslint:recommended 配置和自定义的规则配置。下面我们来逐一分析这些规则：
no-var-keyword：禁止使用 var；no-console：禁止使用 console；indent：使用两个空格缩进；semicolon：使用分号结束语句。
当我们在 TypeScript 代码中使用 TSLint 进行代码检测，它会扫描我们的代码并检查其是否符合定义的规则。例如，在使用 TSLint 检测的过程中，如果有使用 var 或 console 的情况，会提示我们需要修改。如果代码遵循了我们在配置文件中定义的规则，那么代码将被通过，反之将被阻止。
ESLint
ESLint 是基于 JavaScript 的代码检查工具，具有轻量、可配置、速度快等特点。它可以用于发现代码中的潜在问题、规范化代码，并且支持自定义规则。ESLint 也同样支持基于配置和自定义规则指定检查规则。
常见的自定义规则使用的 ESLint API 如下：
- RuleTester：用于在自动化测试中断言规则的行为；
- Linter：ESLint 核心提供了一些工具函数；
- SourceCode：可以用来获取构成 JavaScript 代码的标记。
ESLint 的配置项包括：
rules：检查配置；env：指定环境（例如 Browser、Node.js 等）；extends：继承其他插件或配置；globals：指定全局变量；plugins：插件列表；parserOptions：指定要使用的 parsers。
ESLint 支持的语法有包括 JavaScript、Vue 模板、TypeScript 等。下面是一个配置文件示例：
-- -------------------- ---- -------
-
--------- ----------------------------
---------- -
--------------------
--
---------- -
---------------------
---------------------------------------
--
-------- -
----------------- -------
------------------------------------- ------
-
-在该配置文件中，我们使用 @typescript-eslint/parser 解析器以支持 TypeScript，使用 @typescript-eslint/recommended 配置继承了指定的规则，设置了一些检查规则，并使用 warn 警告级别进行提示。
TSLint 和 ESLint 区别
目前来看，TSLint 已处于官方告知不再维护的状态，官方建议将 TSLint 迁移到 ESLint 中使用。TSLint 停止维护并不意味着停止使用。下面是 TSLint 和 ESLint 的一些区别：
- TypeScript 和 JavaScript
TSLint 主要是面向 TypeScript 的代码检查，ESLint 则是针对 JavaScript 的。这也是影响选择工具的一个因素。对于纯 JavaScript 项目来说，通常使用 ESLint；对于 TypeScript 来说，首选 TSLint。
- 规则配置
两者在规则配置上有所不同。TSLint 规则编写比较直观，通过与 ESLint 在配置上的不同，我们可以在使用中适当进行选择。TSLint 支持 extend 来扩展别的配置文件，规则名与参数之间使用键值对的方式传递参数。而 ESLint 则是编写 JavaScript 代码定义规则，规则名与参数之间使用数组传递参数。
- 性能问题
在项目中使用 TSLint 的开销会比 ESLint 大。EsLint 会在代码中插入一些信息用于适配代码检测的需要。因此，当应用程序的代码较多时，TSLint 的性能表现较 ESLint 更差。这也是我们在作出选择时需要考虑的一个因素。
结论
在使用前端代码检测工具的时候，我们可以选择不同的工具，目前来看 TSLint 与 ESLint 都是常见的选择。如果你正在进行一个纯 JavaScript 项目或是一个 TypeScript 项目，那么选择相应的工具即可；但是如果你要开发的项目既有 TypeScript 也有 JavaScript 代码，那么 ESLint 极有可能是一个更好的选择，可以兼容 TypeScript 与 JavaScript 代码同时进行检查。
总之，在我们选择工具的时候，不仅仅需要考虑工具本身的功能，还需要考虑项目需求以及自身经验也需要不断推陈出新，不断优化自己的代码技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b5f77ddd3a70eb6d299c9