省流助手
chrome插件：github.com/xiamuSama/p…
babel插件：github.com/xiamuSama/r…
背景
初到公司，对项目结构目录不熟悉。每次查找代码的链路：找路由 -> 找路由对应组件 -> 组件对应的文件，而且在改bug的时候也是这样的流程。就两个字，糟心！
这时脑里冒出一个想法，如果我能右键直接打开vscode，定位到哪个文件哪一行，岂不是美滋滋？那该如何做呢，没思路！！直到我翻到了下面这篇文章.....
灵感乍现
简单来说，就是用url协议的方式直接打开vscode！
我不得不佩服，好骚！
直接地址栏输入试试！成功！
如果我再能以chrome插件的形式将协议直接注入到页面里，这不就成了！好！已然成竹在胸👌🏻！
此时高强度颅内风暴中....
ps：仅针对于本地开发的思路，对于webIDE这种的先不考虑。
颅内训练
协议号
可以看成是当前仓库的文件夹在本地电脑的位置 + 目标文件在当前仓库的相对位置。
- 当前仓库：可以以配置的形式写入，这样其他人也能用了。
- 目标文件：可以在webpack打包的时候注入到dom节点中,也可以由开发者手动维护。
const Page: React.FC<Props> = () => {
return (
<div data-vscode-schema=/xx/xx/index.tsx:8:10">
<Content />
</div>
);
};
ps：这里shema这么设计的原因：目前项目里根据路由打包，一个路由对应一份js，我们可以在这个打包节点对最上层的dom节点进行schema注入。我这里为了偷懒，直接自己手动维护一份，插件内取的schema永远是第一个且只拿一个。多份schema的情况下面我有讨论。
chrome插件开发
开发手册： developer.chrome.com/docs/extens…
插件栏配置好仓库的当前位置（如上图），代码里埋好文件相对位置的schema，在网页右键里注册好打开vscode的命令，然后就可以愉快的window.open("协议号")了！
这时候细心的同学就会有一个问题，这种右键打开的方式只适合一个路由页面一个埋点！
对！没错！我这里是觉得一个点够用了。如果我在非要在一个路由页面组件里埋多个点怎么办？
这里我有个大概不成熟的想法：
针对于页面多埋点的情况，插件能不能像react-devtools一样生成一个tree呢？我姑且叫它”schema tree“。点击这个tree上的每个子节点，也可以直接跳转。
光是想着就太麻烦了！先这样吧，等以后有空再研究！
结语
从想法到付诸实现，就是一段收获。这期间最折磨的还是chrome插件的开发（初体验），有空我再整理一篇开发初体验的文章。先这样。最后附上一个demo效果图。
