简单上手VSCode配置用户代码片段

不可名状邵雅虎

已于 2022-08-10 16:53:51 修改

阅读量1.2k

点赞数 2

文章标签： vscode javascript

于 2022-08-10 16:46:30 首次发布

本文链接：https://blog.csdn.net/shaoyahu/article/details/126269278

版权

配置用户代码片段

使用VSCode提供的配置用户代码片段我们可以轻松的写出一些【模板式代码】

本文举例使用的VSCode版本为 1.69.2

1. 点击左下角设置 , 选择配置用户代码片段

在这里插入图片描述

2.这里以vue为例 , 选择下拉列表中的vue.json

在这里插入图片描述
打开后我们可以看到这个文件有如下内容

可以填写的内容分别是

"Print to console": { // 就好像是在问,嘿你的名字是什么
	"prefix": "log", // 输入这里的代码就可以带出整个片段
	"body": [  // 你想带出的代码
		"console.log('$1');",
		"$2"
	],
	"description": "Log output to console" // 就好像是在问,嘿为什么你叫小明
}

3.制作一个简易的vue3模板

  "v3":{
    "prefix": "v3",
    "body": [
      "<template>",
      "  <div>",
      "    ",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "vue3配置代码 , 包含setup语法糖和scss , 不包含TS"
  }