Simple configuration details of VSCODE to write VUE

This article introduces you to introducing related content about VSCode writing Vue, sharing it out for your reference to learn, let’s take a look at the detailed introduction:

PS: Now uses the venur plugin

  • Cracked Win7, and the result of the Sublime Text plugin can not be installed, various hearts, so decided to transfer vscode .

  • Compared to Sublime Text, VSCode has many advantages:

Chinese input method supports better. Under the Windows platform, you need ST to support Chinese input to install a variety of plugins, and the effect is also a strong man.
The basic function is more comprehensive. Vscode self-with plug-in management, Git, Sidebar, integrated terminal, EMMET, etc., ST needs to be installed, waste time.

But the ST plugin is richer, the VSCode plug-in is relatively small, and the VUE-related plug-in vscode is only one, and there are many problems used in use, and the author has not updated for a long time. One afternoon, eventually can be used to write the Vue project.
 vscode About VUE Plugin Now there is only VSCode-Vue, the installation completion code prompt does not take effect, because the language mode of the Vue file is default to HTML, need to set up in Setting.json:   
“FILES.Associations”: {“* .Vue”: “Vue”}

But this time write a style The EMMET plugin cannot be identified correctly, so I will give up this way later.

Careful thinking, writing Vue projects mainly:
  • Code completion & code fragment
  • Emmet correctly generates HTML tag
  • EMMET correctly generates CSS, SCSS
  • code highlight

Among them, 2, 3, 4, can be done in HTML, and Vue code completion and code snippet can only write itself, so I will restore the language mode of the Vue file as default. HTML, add the code snippet required for the VUE file in the user code snippet (file-preference-user code snippet -html), the final effect is OK. Added code snippet:

   {// 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 area: "Print to console": {"prefix": "log", "body": [ "Console.log ('$ 1');", "$ 2"], "Description": "Lig output to console "}," create vue template ": {" prefix ":" vuec "," body ": ["  ","  "," , "export default {" "Name: \" $ {1: Component_name} \ "," DATA () {"," Return {","}; "}", "}", "", "  ""  "]," Description ":" Create Vue Template "} 


The above is the full content of this article, I hope this paper will bring some help to everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment