自己动手写符合自己业务需求的eslint

使用eslint和stylelint之类的工具扫描前端代码现在已经基本成为前端同学的标配。但是,业务这么复杂,指望eslint等提供的工具完全解决业务中遇到的代码问题还是不太现实的。我们一线业务同学也要有自己的写规则的能力。

eslint是构建在ASTParser基础上的规则扫描器,缺省情况下使用espe作为AST解析器。rules写好对于AST事件的回调,linter处理源代码之后会根据相应的事件来回调rules中的处理函数。

另外,在进入细节之前,请思考一下:eslint的边界在哪里?哪些功能是通过eslint写规则可以做到的,哪些是用eslint无法做到的?

一先学会如何写规则测试

兵马未动,测试先行。规则写出来,如何用实际代码进行测试呢?

所幸非常简单,直接写个json串把代码写进来就好了。

我们来看个no-console的例子,就是不允许代码中出现console.*语句的规则。

首先把规则和测试运行对象ruleTester引进来:

//------------------------------------------------------------------------------//Requiments//------------------------------------------------------------------------------construle=qui("../../../lib/rules/no-console"),{RuleTester}=qui("../../../lib/rule-tester");//------------------------------------------------------------------------------//Tests//------------------------------------------------------------------------------construleTester=newRuleTester();

然后我们就直接调用ruleTester的run函数就好了。有效的样例放在valid下面,无效的样例放在invalid下面,是不是很简单。

我们先看下有效的:

ruleTester.run("no-console",rule,{valid:["Console.info(foo)",//singlearrayitem{code:"console.info(foo)",options:[{allow:["info"]}]},{code:"console.warn(foo)",options:[{allow:["warn"]}]},{code:"console.error(foo)",options:[{allow:["error"]}]},{code:"console.log(foo)",options:[{allow:["log"]}]},//multiplearrayitems{code:"console.info(foo)",options:[{allow:["warn","info"]}]},{code:"console.warn(foo)",options:[{allow:["error","warn"]}]},{code:"console.error(foo)",options:[{allow:["log","error"]}]},{code:"console.log(foo)",options:[{allow:["info","log","warn"]}]},//


转载请注明:http://www.aierlanlan.com/cyrz/2361.html

  • 上一篇文章:
  •   
  • 下一篇文章: