当前位置:首页 >> 智能终端演进 >> 【VSCode】文件模板创建及使用.md,空中网天猫旗舰店(vscode模版)

【VSCode】文件模板创建及使用.md,空中网天猫旗舰店(vscode模版)

cpugpu芯片开发光刻机 智能终端演进 1
文件名:【VSCode】文件模板创建及使用.md,空中网天猫旗舰店 【VSCode】文件模板创建及使用.md 背景

最近使用VSCode学习Vue项目比较频繁,每次创建Vue文件都要手动写重复代码,特别麻烦,就上网查找自动生成代码的说明,结果发现VSCode有代码模板,怪怪,感觉发现新大陆了(low!)。

配置

打开配置

方式一:首先打开File->Preferences->Configure User Snippets配置(文件->首选项->配置用户片段): 方式二:或通过快捷键Ctrl+Shift+P打开命令面板,输入snippets,选择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键即可生成模板代码,如下图所示:
协助本站SEO优化一下,谢谢!
关键词不能为空
同类推荐
«    2025年12月    »
1234567
891011121314
15161718192021
22232425262728
293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接