vscode代码模板（vue3模板）输入vue3显示代码提示

朱雀 2024-03-23 16:01 126阅读 0赞

**途径一：在vscode中依次打开：【文件】-->【首选项】-->【配置用户代码片段】-->【新代码片段】**

**途径二：或者点击左下角的设置模样的按钮也可找到（如下图）**

**![265f5fdcd4c54e70b43906ea9eae0b1a.png][]**

**然后点击vue.json![e376b6d6b8f348ee940ecaa8ac33ffad.png][]**

**如果没设置过的话就像下图一样；配置过的应该也知道后面的步骤了**

**![6377a5bc8610419ea90ae0425182088b.png][]**

**贴入下面代码**

{
    	// 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.
    	// Example:
    	// "Print to console": {
    	// 	"prefix": "log", //log为快捷名称
    	// 	"body": [
    	// 		"console.log('$1');",//body中就是输入快捷名称并且选择时快捷生成的代码模板
    	// 		"$2"
    	// 	],
    	// 	"description": "Log output to console"
    	// }
    	"Print to console": {
    		"prefix": "vue3",
    		"body": [
    		  "<template>",
    		  "  <div></div>",
    		  "</template>",
    		  "",
    		  "<script setup>",
    		  "import { ref, reactive, getCurrentInstance } from 'vue';",
    		  "const { proxy } = getCurrentInstance()",
    
    		  "</script>",
    		  "",
    		  "<style scoped lang='scss'>",
    
    
    		  "</style>"
    		],
    		"description": "Log output to console"
    	  }
    
    }

**快捷键：ctrl+s；保存好文件就可以用了**

**![87ee8ff93d9345eda2821446c3e84613.png][]**

**当我们选择vue3时就可快速生成代码模板body中的代码了，如下图**

**![874f85faeeac496bb57a69bb0bfbfddb.png][]**

**就此完成；**

**只为记录学习中的问题**

[265f5fdcd4c54e70b43906ea9eae0b1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/5a1b34b82890480a92c6d108d27c4a79.png
[e376b6d6b8f348ee940ecaa8ac33ffad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/83684389ff474927b4046342a0dc5ac9.png
[6377a5bc8610419ea90ae0425182088b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a1c6419d4d4c44c494dc9c6c698f6aca.png
[87ee8ff93d9345eda2821446c3e84613.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/6aa95e2676724927834503e6d4d4009d.png
[874f85faeeac496bb57a69bb0bfbfddb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/59136b4392bd4d82a9d579586288f323.png