测试问题
那么eslint自定义的规则该如何去进行测试呢？在用Yeoman generator搭建的工程目录中，其实官方也提供了测试的方法，以块级注释为例
在命令行中npm run test,得到如下的结果
一开始开发的时候遇到问题，如下图：comments结果是什么，blockComments是什么等等。由于是node写的，只能在node环境中跑。不像在浏览器中打开devTool直接console一下就知道结果了。我总不能在所有代码都编写好后再调试吧，我对ast语法没有到如火纯青的地步,哪里错了都不知道，完全是黑盒了。还好有上面的test。
lib/rules/no-block-comments.js
/**
* @fileoverview js不能块级注释
* @author mj
*/
"use strict";
//------------------------------------------------------------------------------
// Rule Definition
//------------------------------------------------------------------------------
module.exports = {
meta: {
docs: {
description: "js不能块级注释",
category: "Fill me in",
recommended: false
},
fixable: null, // or "code" or "whitespace"
schema: [
// fill in your schema
]
},
create: function(context) {
// 获取源代码
const sourceCode = context.getSourceCode();
return {
Program(node) {
// 获取源代码中所有的注释
const comments = sourceCode.getAllComments();
// 获取所有的块级注释
const blockComments = comments.filter(
({ type }) => type === "Block"
);
console.log("mj", blockComments)
blockComments.length &&
context.report({
node: node,
message: "No block comments"
});
}
};
}
};
tests/lib/rules/no-block-comments.js
/**
* @fileoverview js不能块级注释
* @author mj
*/
"use strict";
//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------
var rule = require("../../../lib/rules/no-block-comments"),
RuleTester = require("eslint").RuleTester;
//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
var ruleTester = new RuleTester();
ruleTester.run("no-block-comments", rule, {
valid: ["var a = 1; console.log(a)"],
invalid: [
{
code: "var a = 1; /* block comments */ console.log(a)",
errors: [{
message: "No block comments",
nodeType: "Block"
}]
}
]
});
1、过几遍官方文档
2、文档中很多解释都晦涩难懂，光看肯定不能知道是什么意思，需要亲手去试验
3、最重要的一点是参考官方是怎么写的。比如我想获取到文件中有多少行注释，但看文档没找到api, 这时候就去官网找那些和注释有关的rule源码，在里面肯定能找到答案
4、刚开始写肯定很慢，语法不会，场景考虑不周。但这个是必经之路，毕竟对于ast,对于node了解不深。
结合vscode测试自定义规则
1、由于npm run test 最终是跑的mocha tests --recursive，推荐先去看下阮一峰老师的mocha
2、也可以去看看vscode前端调试不完全指南
通过 vscode 调试前端代码主要依赖于一个插件：Debugger for Chrome，该插件主要利用 Chrome 所开放出来的接口 来实现对其渲染的页面进行调试。可以通过 Ctrl + Shift + X 打开插件中心，搜索对应插件后直接安装。安装完成并重新加载 vscode 后，可以直接点击调试按钮并创建新的启动配置。如果你之前已经创建过启动配置了，就可以直接打开 .vscode/launch.json 进行修改。
