开发虚拟商店的一些技巧

上次答应一位读者介绍一下开发这个插件的一些原则和技巧，我也在这里做了总结。

基本工具

1正则表达式，正则表达式大家都不陌生。正则表达式的优点是速度快。对于代码完成的插件，用户肯定希望更快地获得反馈。测试1000行vue文件匹配mapXXX()等所有api字符串只需要不到1ms，但其缺点也非常明显。例如，它与上下文无关，

mapState({ a : state=state . test，})；有了这样一段代码，我们就可以使用vscode的api，使用/ b apstate ([ ' '](。*) [' '] (?s*)？)?(([[sS]*？])|({[sS]*？}))?s*)/g捕获了上面的代码，但是你要考虑的是，我的朋友，这个函数有三个方法

mapState({ a : state=state . test，b(s){ return s . test；}，c:函数{ return s . test；},});如何用正则表达式捕捉属性A、B、C，得到三个函数的第一个参数？不能排除有人能做到，但可能需要很多时间。

2抽象语法树(以下简称ast)，这里我的意思是巴贝尔的解析器babylon的优缺点，ast补充了正则表达式的优点。解析器的缺点是比较慢，但是解析器得到的ast在描述一个代码的时候比较准确，可以得到函数的参数。等了很多资料，这里就不科普了。掘金有很多关于ast的文章。在这里，强烈推荐使用astexplore。你可以在网站上练习和做一些很酷的事情。

开始

有了这两个工具，我们就可以开始编写代码了。既然两个工具的优缺点是互补的，不知道能不能一起用。想到的理想方式是用正则表达式捕获mapXXX，找到所有匹配的代码段，然后用解析器得到ast，再分析函数的参数，因为ast的信息非常丰富。我们可以得到它是什么样的函数以及函数的第一个参数，这样即使用户使用。触发补语，我们仍然可以给出正确的建议。

但是如果我们想得到商店中所有的定义，我们必须找到商店的入口文件。怎么才能找到商店的入口文件？还记得我们通常是怎么把它放进商店的吗？

从“Vue”导入Vue；从“”导入应用程序。/app . vue '；从“”导入存储。/store '；new Vue({ render: h=h(App)，store，})。$ mount(' # app ')；我们只需要通过解析器的ast获取到存储的相对路径。获得存储的相对路径后，我们可以在vuex的实例中获得配置对象。当我们得到配置对象时，我们可以得到all、variations、state、getters、modules，并一步一步遍历所有模块。实际上，每个模块都是vuex实例的一个配置对象，所以我们可以递归地获取所有的存储代码。

当然，打电话的时候要注意一些事项，比如对象可能是从外面介绍的

从“Vue”导入Vue；从“Vuex”导入Vuex；从“”导入状态。/state '；vue . use(Vuex)；导出默认的新Vuex。存储({ state，})；它可以直接以属性的形式定义

导出默认值{ account : { name space d : true，state: { number: 31 }，getter s : { test len : state=state . number . length }，对： { change(state，{ number }){ state . number=number；} } }};也可以先定义，然后以对象属性速记的形式引入。

const state={name :' jack'}导出默认值{state : state}的摘要

以上只是分享一下我用来制作这个插件的工具和思路，也是对这个开发的总结。具体实施请移至此处

反射

打开这个vscode插件后，获得的用户数量还没有达到理想的水平，他们已经反思自己了

前端可以选择的ide有很多。不是每个人都使用vscode。我的插件只能带来有限的功能。它可以在. vue文件中使用vuex中的数据一次或两次。安装这个插件带来的体验提升是有限的，无法和vetur相比，vetur涵盖了所有常用的功能。之前有掘金的用户想让我提建议，可以考虑和vetur合并。但是目前看来需要这个插件的人并不多，所以我还是先尽力维护这个项目吧。

一些可能对你有帮助的网站

Vscode插件官方文档，可以教你制作一个vscode插件：vscode官方文档

Astexplore:可以在这里自由练习主流解析器的用法：可以看到ast: astexplore的结构

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。