Vue Vuex 自动补全插件开发原理：正则与 AST 的结合应用

介绍开发 Vue Vuex 状态管理自动补全插件的相关技巧。

此前曾承诺向读者介绍开发该插件的原理与技巧，此处进行统一总结。

基础工具：正则与 AST 的优劣分析

所需基础工具介绍。

首先是正则表达式，这是一种广为人知的技术。其优势在于处理速度快，对于代码补全插件而言，用户期望获得即时反馈。测试显示，对 1000 行的 vue 文件进行匹配，提取所有 mapXXX() 等 API 字符串，耗时不足 1ms。然而，其显著缺点在于缺乏上下文感知能力。例如：

mapState({
 a: state => state.test,
});

针对上述代码片段，虽然可以利用 /\bmapState\(([\'\"](.*)[\'\"](?:,\s*)?)?((\[[\s\S]*?\])|(\{[\s\S]*?\}))?\s*\)/g 在触发补全时捕获到相关代码，但还需考虑函数定义的三种不同形式。

mapState({
 a: state => state.test,
 b(s) {
 return s.test;
 },
 c: function(s) {
 return s.test;
 },
});

如何仅凭正则表达式准确捕获 a, b, c 这三个属性，并提取出三个函数各自的第一个参数？尽管理论上可行，但实现过程可能耗时较长。

2 抽象语法树（AST，下文简称 ast），此处在使用 babel 的 parser babylon 时，ast 与正则表达式在优缺点上具有互补性。parser 的缺点在于相对较慢，但通过 parser 生成的 ast 对代码的描述更为精确，可获取函数参数等大量信息。此处不作科普，掘金上有许多介绍 ast 的文章，强烈推荐 astexplore 网站，可在上面练习并实现一些有趣的功能。

核心实现：正则定位与 AST 参数解析

具体实施步骤。

结合上述两种工具的优势，理想的方案是：先使用正则表达式捕获 mapXXX 这类工具函数，定位所有匹配的代码段；随后使用解析器生成 AST，进而分析函数参数。由于 AST 包含丰富信息，可以判断函数类型及第一个参数。这样，当用户使用 . 触发补全时，即便使用了 state 的简写形式 s，系统也能给出正确的建议。

Store 入口识别与模块递归遍历

为了获取 store 中的所有定义，必须找到 store 的入口文件。回想平时注入 store 的方式：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
 render: h => h(App),
 store,
}).$mount('#app');

通过解析器获取该文本的 AST，即可得到 store 的相对路径。获得路径后，可获取 Vuex 实例中的配置对象，并逐步向下提取所有 mutations、state、getters 和 modules。遍历所有 module（每个 module 即是一个 Vuex 实例的配置对象），递归执行上述代码，即可获取所有 store 代码。具体流程见下图。

在调用过程中需注意一些特殊情况，例如对象可能从外部引入。

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
Vue.use(Vuex);

export default new Vuex.Store({
 state,
});

或者以属性形式直接定义。

export default {
 account: {
 namespaced: true,
 state: {
  number: 31
 },
 getters: {
  testlen: state => state.number.length
 },
 mutations: {
  change(state, { number }) {
  state.number = number;
  }
 }
 }
};

也可能先定义变量，再以对象属性简写形式引入。

const state = {name: 'jack'}
export default {
 state: state
}

总结部分。

以上分享了制作该插件所使用的工具与思想，作为开发总结。具体实现细节请参阅相关代码仓库。

插件开发反思与维护现状

反思与改进方向。

开源该 VSCode 插件后，用户数量未达预期，对此进行了反思。

• 前端开发者可选用的 IDE 众多，并非所有人都使用 VSCode。
• 该插件提供的功能较为有限，可能在单个 .vue 文件中仅使用一两次 Vuex 数据。因此，安装该插件带来的体验提升有限，无法与涵盖常用功能的 Vetur 等插件相比。

此前有用户建议考虑与 Vetur 合并，但目前看来需求者不多。因此，目前策略是尽力维护好该项目。

推荐学习资源

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

VSCode 插件官方文档，提供手把手教你制作 VSCode 插件的指导：vscode官方文档。

astexplore：在此可自由练习主流解析器的用法，查看 AST 结构：astexplore。

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