@vscode – One click to generate.vue templates

create by db on 2020-1-16 14:25:40

Recently revised in 2020-1-17 14:18:17

Hello friends, if you think this article is good, please click a like or a star, your like and star are my motivation to move forward! Making the address

preface

VSCode is a lightweight and powerful code editor that supports Windows, OSX and Linux. Built-in JavaScript, TypeScript, and Node.js support, as well as a rich plug-in ecosystem. To me this is the most useful editor on the front end, without one.

As an artifact, VSCode supports user – defined some commonly used code snippets, so as to achieve fast development, improve work efficiency. Let’s take the one-key generation of. Vue template as an example, together to create their own coding artifact.

The body of the

1. Create a template configuration filevue.json

There are three ways to use any of them:

  • Use the shortcut Ctrl + Shift + P to call out the console, then type snippets and select, type vue.json, and press Enter.

  • File > Preferences > User Snippets, type vue.json and press Enter

  • File > Preferences > User Snippets, when the search box pops up, type vue.json, then press Enter

2. Change the template content

Replace the following template content with the vue.json file (you can modify the template content according to your needs)

{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and description. // The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the same ids are connected. "Print to console": { "prefix": "vue", "body": [" <! -- my page $1 -- - > ", "< template >", "< div class =" my_page '> ", "< el - container >", "< el - the header > header < / el - the header >", " <el-main>Main</el-main>", " <el-footer>Footer</el-footer>", " </el-container>", " </div>", "</template>", "", "<script>", "// You can import other files (such as: component, tool js, third-party plug-in JS, JSON file, image file, etc.) "," Import component name from 'Component Path '", "", "export Default {", ", "// import imported components must be injected into an object to be used "," Components: {{}, data ", "()", "/ / here to store data", "return", ""," "}} ", ", ", "/ / monitor properties Similar to the concept of the data computed: "," {},", "" // monitor data changes "," watch: {}, ", "/ / life cycle - has been created (you can access the current this instance)", "created () {"," ", "}, ", "/ / life cycle - mount complete (you can access the DOM elements)", "mounted () {"," ", "}, ", "beforeCreate () {}, / / life cycle - create before", "beforeMount () {}, / / life cycle - before mount", "beforeUpdate () {}, // life cycle - before update ", "updated () {}, // life cycle - after update "," beforeDestroy () {}, // life cycle - beforeDestroy ", "destroyed () {}," destroyed () {}, ", "activated () {}," // if the page has keep-alive caching, this function will trigger ", "// methods "," methods ": {", "","} ", "} ", "< / script >", ""," < style lang = 'less' scoped > ", "/ / @ import url ($3); the introduction of the CSS class", "$4", "< / style >". "" ], "description": "Log output to console" } }Copy the code

Three, template use

Create a test.vue file, type “vue”, press enter or Tab, and the template is automatically generated.

conclusion

As the saying goes: the knife is not mistakenly cut wood. Having a more handy editor also makes the coding process more silky (fog). Also: If you want to know more about keyboard shortcuts, you can see the previous article – Unlocking new poses – Keyboard Tips.

This article is my first article in 2020, today is the off-year, can read this article is basically still fighting in the coding line of the program monkey, I wish you a happy New Year, good luck!

I wish you all the best in 2020!

The road ahead is long; I see no ending.

Postscript: Hello friends, if you think this article is good, remember to click a “like” or “star”, your “like” and “star” are the motivation for me to write more and richer articles!Making the address



dbThe document library 由 dbusingCreative Commons Attribution – Non-commercial – Share in the same way 4.0 International licenseLicense.

Based on thegithub.com/danygitgitOn the creation of works.

Permissions outside of this license agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.