Some tips for developing VueThis$Store

Last time, I promised a gold digger to introduce some of the principles and techniques of developing this plug-in, and I also summarize them here.

Basic tools

1 regular expressions, regular expressions are familiar to everyone, the advantage of regular expressions is fast, for a code completion plug-in, users certainly want to get feedback faster, tested 1000 lines of vUE file matching all API strings such as mapXXX() is only less than 1ms time, But the downside is obvious, it’s context-free, for example

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

Such a piece of code, we can use vscode API when triggered after completion, use / \ bmapState \] ([[\ ‘\’ [\ ‘\ “(. *)] (? :,\s*)?) ? ((\[[\s\S]*?\])|(\{[\s\S]*? \}))? \s*\)/g captures the above code, but you also need to consider that there are three methods for functions

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

How can you use regular expressions to capture a, B, and C attributes and get the first parameter of three functions?

The advantages and disadvantages of Babel’s Parser Babylon are somewhat complementary. The disadvantage of Parser is that it is relatively slow. However, the AST from parser is more accurate in describing a code, you can get the parameters of a function, etc., etc. There are many articles on AST, and ASTExplore is highly recommended. You can practice on it and do some cool things.

starts

With these two tools, we can start writing code, since the advantages and disadvantages of two kinds of tools are complementary, I just want to can combine their use, finally thought of the ideal method is to use regular expressions to capture mapXXX this tool function, find all the matching of code after the use of a parser to obtain the ast, In the analysis of function parameters, because the AST is very rich in information, we can get what kind of function it is, and the first parameter of the function, so that users can use. When the completion is triggered, using the abbreviation S for state, we can still give the correct advice.

But to get all the definitions in store, we have to find the store entry file. How do we find the store entry file? Remember how we normally inject stores?

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

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

As long as we get the AST of this text through parser, we can get the relative path of Store. After obtaining the relative path of Store, we can get the configuration object in vuex instance. After obtaining the configuration object, we can get all the configuration objects step by step. Mutations, the state, getters, modules, iterate through all the module, each module is actually a vuex instance configuration object, we can more than recursive code, for all the store code, a flow chart.

Of course there are a few things to be aware of when calling, such as objects that may be imported from outside

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

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

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

Copy the code

You might define it directly as an attribute

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

It may also be defined first and introduced as a shorthand for object properties.

const state = {name: 'jack'}
export default {
    state: state
}
Copy the code

conclusion

The above is just the tools and ideas I used to make this plug-in to share with you, but also the summary of this development, the specific implementation please move here

reflection

After open source this vscode plug-in, the number of users has not reached their ideal level, I also have reflection down

• There are many ides for the front end to choose from, and not everyone uses vscode
• The functionality that I can bring with this plug-in is limited, probably in one.vueData from Vuex is only used once or twice in a file, and the experience gained by installing this plug-in is limited compared to that of Vetur, which covers all common features.

I’ve had some nuggets users come to me to suggest merging with Vetur, but so far it doesn’t seem that many people need the plugin, so I’ll try my best to maintain the project.

Some websites that may be helpful to you

Vscode plugin, you can teach you how to make a VScode plugin: VScode official documentation

Astexplore: You can freely practice using the mainstream Parser here: See the structure of the AST: AstExplore

Babel-plugin-handbook, Show you how to create a Babel-plugin. You will also learn how to use Babylon: Babel-plugin-handbook

I’ll give you a few more tips on non-existent sites: Introduction to AST and basic use of ASTExplore. The author is a member of TC39 and has many videos on AST, but watch them from outside the walls.