网站开发 界面新闻网站排行榜
背景
最近使用VSCode学习Vue项目比较频繁，每次创建Vue文件都要手动写重复代码，特别麻烦，就上网查找自动生成代码的说明，结果发现VSCode有代码模板，怪怪，感觉发现新大陆了(low!)。
配置
-
打开配置
- 方式一：首先打开File->Preferences->Configure User Snippets配置（文件->首选项->配置用户片段）：
- 方式二：或通过快捷键
Ctrl+Shift+P打开命令面板，输入snippets，选择Configure User Snippets：
- 方式一：首先打开File->Preferences->Configure User Snippets配置（文件->首选项->配置用户片段）：
-
然后选择需要配置模板的对应文件类型（以vue模板为例，选择vue.json，其他模板同理为类型.json），如：
-
配置自定义代码模板:
"Print to console"代码模板内容"prefix"代码模板前缀，在对应类型中使用该前缀可触发根据代码模板生成代码"body"代码模板数据，实际是字符串数组$1,$2,$3代码模板变量，根据变量顺序从1开始，$0为最后一个变量，会在代码生成后输入，根据次序代表变量顺序${1:default}代码模板变量默认值，当不输入时以默认值显示，否则显示输入值
{{// 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",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }"Print to console":{"prefix": "vue","body": ["<template>"," <div class='${1:home}'></div>","</template>","<script>","export default {"," name: '${2:Home}',"," data() {"," return {"," }"," },"," methods: {},","};","</script>",]}
}
使用
- 配置完成后，在VSCode中输入模板名称，按tab键即可生成模板代码，如下图所示：
