【eslint 插件开发】禁用 location 跳转外部链接

背景

公司 h5 项目需要为跳转的外部链接统一增加参数。举个例子,假设有如下代码:

location.href = 'https://www.test.com/a?id=xxx' location.replace('https://www.test.com/a?id=xxx') 

我们需要把所有链接都增加参数uid:

location.href = 'https://www.test.com/a?id=xxx&uid=someuid' location.replace('https://www.test.com/a?id=xxx&uid=someuid') 

需求分析

使用函数统一跳转逻辑

方便维护和更新,我们需要使用函数来统一跳转逻辑。

// 直接跳转 location.href = 'abc' 转化为 navigateTo('abc') location.replace('abc') 转化为 redirectTo('abc') 

虽然可以查找整个项目进行手动替换,但多个项目的人工操作,显然是费时费力的。

禁止后续提交使用 location 跳转

当我们完成当前代码的替换后,还需要防止其他人使用 location 进行跳转。一个基本事实是,无法用人工监督来杜绝这个行为(或者说可以监督但成本太高)。

使用 eslint 插件,自定义错误规则和修复程序,可以完美解决这两个问题。

创建插件 eslint-plugin-huoli

如果首次创建插件,建议先阅读官方文档Create Plugins

或者参考我的项目eslint-plugin-huoli

插件的写法很简单,就是针对某个 AST 节点类型进行处理。你可以在ast 官网查看某条代码对应的 AST 数据结构和节点类型。

注意点

遍历节点时机:enter、exit

可能大家更熟悉 babel 插件,了解遍历 AST 节点有两个时机:进入和退出:

module.exports = {   ...   AssignmentExpression: {     enter: node => {},     exit: node => {},   } } 

eslint 也有一样,不过写法略有不同:

module.exports = {   ...   AssignmentExpression() {},   'AssignmentExpression:exit'(node) {}, } 

如何调试插件

开发插件过程中,如果能轻松的进行 debug 会极大提升开发效率。参考eslint-plugin-huoli

首先,使用Ruletester创建测试用例。

然后,在package.json中增加脚本:

{   scripts: {     ...     "debug": "node node_modules/jest/bin/jest",   } } 

使用 vscode 进行调试

发表评论

评论已关闭。

相关文章