Use vscode to compile simple vue configuration details, and vscode to compile vue details

Use vscode to compile simple vue configuration details, and vscode to compile vue details

Preface

This article mainly introduces the content about vue simple configuration in vscode for your reference. Let's take a look at the details below:

PS:We recommend that you use the vetur plug-in.

Win10 crashes and win7 is reinstalled. As a result, the sublime text plug-in cannot be installed, and various heart plug-ins, so I decided to switch to vscode.

Compared with sublime text, vscode has many advantages:

• Supports better Chinese input methods. On windows, you need to install various plug-ins to support Chinese input, and the effect is also unsatisfactory.
• More comprehensive basic functions. Vscode comes with plug-in management, git, sidebar, integration terminal, emmet and other functions. st needs to be installed on its own every time, which wastes time.
  

However, the st plug-ins are richer and the vscode plug-ins are relatively fewer. There is only one vue plug-in vscode, and there are many problems in use. The author has not updated the plug-in for a long time, so I had to wait for an afternoon, it can finally be used to compile vue projects.

The vscode vue plug-in currently only has one vscode-vue, and the installation code prompt does not take effect. This is because the language mode of the vue file is html by default and needs to be set in setting. json:

"files.associations": {  "*.vue": "vue" }

However, the style emmet plug-in cannot be correctly identified at this time, so I later gave up this method.

Think carefully and write vue projects:

• Code Completion & code snippets
• Emmet correctly generates html tags
• Emmet correctly generates css and scss
• Code highlighting
  

The steps 2, 3, and 4 can be done in html, while vue Code Completion and code snippets only need to be compiled by yourself, so I restored the language mode of the vue file to the default html, and added the required code snippets (file-preferences-user code snippets-html) to the user code snippets ), the final effect is acceptable.

Added code snippets (Continuous updates ):

{ // Place your snippets for HTML 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected. // Example: "Print to console": {  "prefix": "log",  "body": [   "console.log('$1');",   "$2"  ],  "description": "Log output to console" }, "Create vue template": {  "prefix": "vuec",  "body": [   "<template>",   "</template>",   "<script>",   "export default {",   " name: \"${1:component_name}\",",   " data () {",   " return {",   " };",   " }",   "}",   "</script>",   "<style lang=\"${2:css}\" scoped>",   "</style>"  ],  "description": "Create vue template" }}

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.