preface

Recently used Vscode editor to write Vue front-end code, found very pits, a lot of things will not prompt, and super difficult to find, so here to record the initial use of small make up encountered pit.

Install Vue VSCode Snippets plugin

After installing Vscode for the first time, I found that some of Vscode’s commands did not work at all.

View the current syntax format of the status bar at the bottom:

If it is HTML click the popup and select vue syntax configuration.

With that in mind, let’s use the functionality of this plug-in.

Two, the use of steps

1. Generate the vUE basic template code

First, create a.vue file using VScode, but it is blank.

With the plugin installed and configured above, we can use the plugin command to generate the base template for our Vue.

vbase
Copy the code

Type vbase and press Enter to generate the base template for us.

2. Customize a template

For example, if you want to generate some comments, just like our Java class, the basic description, the creation time, how do you do that? We have the plugin installed, we just need to modify the configuration.

First, find the jSO file: C:\Users\DT developers. vscode\extensions\sdras.vue-vscode- Snippets -2.2.0\snippets will usually be found in this location by default with plugins installed.

Open vue.json to add our own configuration, save and restart Vscode.

3. Common shortcut keys

Such as:

vdata
Copy the code

Here’s how to use all the shortcuts:

Detailed can see the official website: github.com/sdras/vue-v…

conclusion

Use the right tools, good tools can bring high efficiency for our development, avoid CV duplication, high efficiency depends on the good use of tools.