VSCode中snippets(代码模板)的使用

首先安装Vue VSCode Snippets,在组件库中搜索并安装。

然后打开插件文件夹

文件夹名是 "作者名.vscode-插件名-版本号"组成的.

C:\Users\Administrator\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets

打开vue.json

"prefix": "vbase" 就是代码块的关键词,输入vbase就会提示代码块 选择vbase2

在代码中插入以下代码:

javascript 复制代码
  "Vue Single File Component2": {
    "prefix": "vb2",
    "body": [
      "<template>",
      "\t<div>",
      "\t</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "\t//接受父组件传过来的数据",
      "\tprops: {",
      "\t},",
      "\t//DOM组件",
      "\tcomponents: {",
      "\t},",
      "\tdata() {",
      "\t\treturn {",
      "\t\t\tproperty: 'vue test',",
      "\t\t};",
      "\t},",
      "\t//计算属性",
      "\tcomputed: {",
      "\t},",
      "\t//监听",
      "\twatched: {",
      "\t},",
      "\t//DOM在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图",
      "\tcreated() {",
      "\t",
      "\t},",
      "\t//DOM渲染完成,组件挂载完成",
      "\tmounted() {",
      "\t",
      "\t},",
      "\t//组件销毁",
      "\tdestroyed() {",
      "\t",
      "\t},",
      "\tmethods: {",
      "\t\tlog(str) {",
      "\t\t    console.log('log', str);",
      "\t\t}",
      "\t},",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      "",
      "</style>"
    ],
    "description": "Base for VueTT File with SCSS"
  },

然后保存,重启VSCode,新建文件测试,输入vb即可,选择刚才输入的vb2即可

相关推荐
float_六七3 分钟前
IntelliJ IDEA双击Ctrl的妙用
java·ide·intellij-idea
android_xc3 小时前
Android Studio国内仓库配置
android·ide·android studio
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
雁于飞3 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
乐吾乐科技4 小时前
乐吾乐大屏可视化组态软件【SQL数据源】
物联网·信息可视化·编辑器·数据可视化·大屏端
Teletele-Lin7 小时前
Miniconda安装与VSCode搭建远程Python、Jupyter开发环境
vscode·python·jupyter·环境配置·远程开发
AiTop1007 小时前
腾讯推出AI CLI工具CodeBuddy,国内首家同时支持插件、IDE和CLI三种形态的AI编程工具厂商
ide·人工智能·ai·aigc·ai编程
数字冰雹14 小时前
“图观”端渲染场景编辑器
人工智能·编辑器
android_xc14 小时前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
云梦谭15 小时前
Cursor 编辑器:面向 AI 编程的新一代 IDE
ide·人工智能·编辑器