在前端开发过程中，代码规范是非常重要的一环。tslint是TypeScript中非常著名的代码规范检查工具。tslint-etc则是在tslint基础上增加了更多通用、实用的规则插件，使得代码质量更加可控。本文将详细介绍如何使用tslint-etc，让您的代码规范更上一层楼。
为什么需要tslint-etc？
在开发过程中，一个好的规范检查工具可以避免很多低级错误。tslint本身已经提供了比较全面、官方支持的检查规则。然而，在实际的开发过程中，还有很多针对一些特殊场景的规则，这些规则可以进一步提高代码质量和可维护性。tslint-etc就是一个集成了这些和tslint官方规则已经覆盖的规则的扩展包。
安装npm包
首先，我们需要将tslint-etc集成到tslint中。执行如下命令进行安装：
--- ------- ---------- ----------
配置tslint
有了tslint-etc的支持，我们需要在tslint的配置文件中进行相应的修改。
打开 tslint.json 配置文件，在 extends 属性中添加：
---------- --------------
tslint-etc包含哪些规则
tslint-etc针对不同场景提供了很多实用的规则插件。
angular
该插件提供一些与Angular框架相关的规则：
template-aspaces- 强制要求每个{{...}}表达式用花括号括起来template-banana-in-box- 禁止使用[(...)]表达式语法template-click-events-have-key-events- 强制要求具有click事件的元素必须具有相应的Enter和/或者Space按键事件
react
该插件提供一些与React相关的规则：
jsx-a11y-anchors- 强制要求可操作的元素必须具有明确的 "role" 属性jsx-a11y-forms- 禁止使用label元素来为控件声明无意义、重复的标签文本
rxjs
该插件提供一些与RxJS相关的规则：
rxjs-pipeable-operators-only- 强制要求只能使用管道操作符,如.pipe()，并禁止使用RxJS的扩展操作符，如do、mergeMap等
其他实用规则
tslint-etc还提供了其他一些实用规则插件：
array-type- 强制这个很长或者很难懂的任意类型的any[]数组类型写法class-name- 类的命名规范no-any- 禁止使用any这种类型，防止出现代码看不懂的情况no-empty-line-after-opening-brace- 禁止在括号之前添加空行variable-name- 强制要求变量名以指定的模式命名，从而避免写出的代码松散，并增强代码的可读性
示例代码
假设有如下的TypeScript代码：
----- ------ -
----- ----
------------- -
--------- - ---------
-
-
-------- ------- ---- -
------------------ --------
-
-------如果我们使用tslint-etc，则tslint将会对代码进行如下规则校验：
----- ------ -
----- ---- -- ------
------------- -
--------- - --------- -- ---------
-
-
-------- ------- ---- -
-- ----------
-
-------结论
tslint-etc为我们提供了更多通用、实用的规则插件，帮助我们提高了代码质量和可维护性。使用tslint-etc的方法非常简单，只需要安装依赖，然后在 tslint.json 中添加配置即可。通过本文的介绍，相信您已经掌握了tslint-etc的使用技巧，希望对您的开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/164961