使用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"]}]},//