前言
在前端开发中,我们都离不开代码质量的保证。TSLint 是一个帮助我们检查和维护代码质量的工具。而 jh-tslint 是一个基于 TSLint 的插件,提供了更多的自定义规则和检测能力。
在本篇文章中,我们将会详细介绍 jh-tslint 的使用方法和注意事项,并给出一些示例代码。
安装 jh-tslint
在使用 jh-tslint 之前,我们需要先安装它。使用 npm 命令即可完成安装:
$ npm install jh-tslint --save-dev
注意:因为 jh-tslint 是一个开发依赖,所以我们需要使用
--save-dev
参数来将其安装到开发依赖中。
使用 jh-tslint
安装完成之后,我们需要在项目中配置 jh-tslint。
在项目根目录下新建一个 tslint.json
文件,内容如下:
{ "extends": "jh-tslint", "rules": { "test-rule": true }, "rulesDirectory": ["./customRules"] }
上面的配置中:
extends
字段用来继承 jh-tslint 内置的规则配置;rules
字段可以自定义配置规则,上面的test-rule
就是一个自定义的规则,我们稍后再进行配置;rulesDirectory
字段用来指定自定义规则所在目录,可以自行指定。默认情况下,在项目根目录下的customRules
目录下查找自定义规则。
在上述的示例配置中,我们定义了一个自定义规则 test-rule
,该规则还没有实现,先不会起作用。
我们需要在 ./customRules/testRule.ts
文件中实现该规则:
-- -------------------- ---- ------- ------ - -------------- ------------ ------ ----------- - ---- --------- ------ - -- ------- ---- ---------- ------ - -- -- ---- ------------- ------ ----- ---- ------- ------------------ - ------ --------- ------------- - - ------------ ------- -- ----- -- - ------------- --------- -- --- ----------- -------- ----- ------------------- --- --------- ------------ ----- ---------------- --------------- ------ -- ----------------- --------------- ------------- - ------ ---------------------------------- ------ - - -------- --------- ------------------ - ------------------------------------ ------ -- - -- ---------- --- ------------------------- - ----- ---------- - ---- -- -------------- -- ---------------- --- --------- -- ------------------------------------------------------ - ----- ---------- - ----------------- -- ---------------------------- -- --------------------- --- ------ - -------------------------------- ------ ----------- -- ---------- -------- - - - --- -
上面的代码是一个简单的实现,检查代码中是否出现了 console.log
。实现方式是使用 TSLint 的内置基础类进一步抽离出我们的规则,并通过 applyWithFunction
来检测并返回 RuleFailure
数据。在 walk 函数中,我们通过遍历 Token ,检查是否存在 console.log
,如果存在,则生成一个 RuleFailure,并通过 ctx.addFailureAtNode
添加到错误信息数组中,并返回给上层函数。
注意:请注意规则的实现过程,当你在实现 jh-tslint 的规则的时候,应该参考 TSLint 官方文档。
jh-tslint 启用规则
在上一节中,我们已经实现了一个自定义的规则,但是这个规则还没有起作用。我们需要在 tslint.json
的 rules
字段中将其启用:
{ "extends": "jh-tslint", "rules": { "test-rule": true }, "rulesDirectory": ["./customRules"] }
这样,当我们执行 npm run lint
的时候,tslint 就会启用 jh-tslint,并检查我们定义的规则。同时,我们可以使用 --fix
参数来修复自动修复的错误。
示例代码
上面给出了 jh-tslint 的基本使用方法,接下来看一段示例代码:
import { test } from './test'; export function test2() { const value = test(); console.log(value); // 告警,不允许 console.log return value; }
上面的示例中,我们引入了一个 test
方法,并在 test2
方法中使用了该方法,并且在该方法中使用了 console.log
。因此,在执行 npm run lint
的时候,会提示告警信息:
$ npm run lint > example-project@1.0.0 lint > tslint -c tslint.json "src/**/*.ts" src/example.ts[6, 3]: Avoid console.log in production code. (test-rule)
提示我们尽量避免在生产环境中使用 console.log
。
结尾
到这里,我们就介绍了 jh-tslint 的基本使用和应用,希望大家可以在日常开发中使用它来提高代码质量和可维护性。并在实际应用中进一步地探究 jh-tslint 的更多细节和使用方法。
参考文献:
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd7f9