Two implementations of Vue: the process of configuring vue template shortcuts in VSCode

1. Create a configuration file:

First, open VSCode, Ctrl+Shift+P, open the search box:

Second, enter: user, and click inSnippets:Configure User Snippets

Third, enter vue3jsand press Enter:

Fourth, open the project and find the configuration file vue3js.code-snippets:

2. Configure shortcuts:

First, vue3js.code-snippetsenter the configuration information in the configuration file:

// 此时生成的代码模板中，只有单引号；
{
    
    
	"Print to console": {
    
    
		 "prefix": "v3js",
		 "body": [
			 "<template>",
				 "  <div></div>",
			 "</template>",
			 "",
			 "<script setup>",
			 "import { ref, reactive } from 'vue'",
				 "",
				 "</script>",	
				 "",
				 "<style lang='scss' scoped>",
				 "",
					"</style>",
		 ],
		 "description": "Log output to console"
	 }
}

// 此时生成的代码模板中，双引号的展示方法(即：模板中展示双引号)；
{
    
    
	"Print to console": {
    
    
		 "prefix": "v3js",
		 "body": [
			 "<template>",
				 "  <div></div>",
			 "</template>",
			 "",
			 "<script setup>",
			 "import { ref, reactive } from \"vue\"",
				 "",
				 "</script>",	
				 "",
				 "<style lang=\"scss\" scoped>",
				 "",
					"</style>",
					],
		 "description": "Log output to console"
	 }
}

Second, vue3js.code-snippetsinterpretation of configuration information:

A. “prefix”Attribute refers to: the name of the generated template;

After the configuration is completed, in the . vuefile, enter the string and click Enter to generate the defined template (ie: vue3js.code-snippetsthe information configured in );

B. “body”Attribute refers to: the code template to be generated;

You can assign corresponding code templates according to your actual needs;

3. Test shortcuts:

First, the testing process:

// At this time, .vueenter the shortcut key in : , and then press Enter, the template configured in v3jswill be displayed on the page ;vue3js.code-snippets

Second, vueanother way to configure template shortcuts:

A. Create .vscodethe file directly in the project:

B. .vscodeCreate a file in the folder vue3js.code-snippetsand add the configured vuetemplate information:

4. Summary:

First, if there is anything wrong or inappropriate, please give me some pointers and exchanges!
Second, if you forward or quote the content of this article, please indicate the address of this blog ( 直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300 . Creation is not easy, but it must be done and cherished!
Third, if you are interested, you can pay more attention to this column (Vue (Vue2+Vue3) essential column for interviews) ( 直接点击下面 url 跳转): https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482