VueThis$Store總結
上次答應一個掘金的讀者介紹下開發此外掛的一些原理和技巧，在此也一併做下總結了。
基本工具
1 正則表示式，正則表示式大家都不陌生，正則表示式的優點就是速度快，對於一個程式碼補全的外掛，使用者肯定希望更快的得到反饋，測試了 1000 行的 vue 檔案匹配全部的 mapXXX() 之類的 api 字串也只是用了 1ms 都不到的時間，但是缺點也非常明顯，他是上下文無關的，比如說
mapState({
a: state => state.test,
});
複製程式碼
這樣一段程式碼，我們可以使用 vscode 的 api 當觸發了補全後，用 /\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 Abstract Syntax Tree（以下用簡寫 ast），我這裡是使用時 babel 的 parser babylon ,ast 和正則表示式的優缺點有點互補的意思，parser 缺點是相對慢，但是通過 parser 得到的 ast 對於一程式碼的描述更加精確，你可以得到函式的引數，等很多資訊，這裡了就不科普，掘金有很多介紹 ast 的文章，這裡強烈推薦這個網站astexplore，你可以在網站上練習，做一些很酷的事情。
開工
有了這兩種工具，我們就可以開始寫程式碼啦，既然兩種工具的優缺點是互補的，我就想能不能將他們結合起來使用，最終想到的比較理想的方法就是，使用正則表示式捕獲 mapXXX 這種工具函式，找到所有匹配的程式碼段以後使用 parser 獲取 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'); 複製程式碼
我們只要通過parser的到這段文字的ast，就可以獲取到store的相對路徑了，獲取到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外掛以後，取得的使用者數量還是沒有達到自己的理想水平，自己下來也有反思
.vue
之前也有掘金使用者想我提建議，可以考慮和vetur合併，但是從目前來看好像並不是有很多人需要這個外掛，我還是先盡力維護好這個專案吧。
一些可能對你有幫助的網站
vscode外掛官方文件，可以手把手教你做一個vscode外掛：vscode官方文件
astexplore：你可以在這裡自由練習主流parser的用法：可以看到ast的結構 ：astexplore
再給你提示一些不存在的網站吧
ofollow,noindex">ast簡介以及astexplore基本使用 ,該作者是tc39成員之一，有不少介紹ast的視訊，不過要在牆外看。