一、作用
把自己常用的代码书写习惯封装成一段代码段,方便多次调用
二、步骤
1. 打开VsCode,点击左下角齿轮(设置)
2. 点击用户代码片段
3. 输入xx.json,如我想封装console.log(),可以输入log.json
4. 以 console.log()和vue示例
- console.log()
{
//提醒自己的字符,可以随便写
"生成 console.log 模板": {
//要封装的代码,这里写log,之后按输入log就会自动补全完整代码
"prefix": "log",
//body里写自定义的代码片段
"body": [
//每行用""括起来,用逗号隔开
//$1表示光标最开始的位置
"console.log($1)"
],
"description": "生成 console.log 模板"
}
}
效果: 输入log,回车得到,光标默认在括号中
- Vue
//vue.json
{
"生成 vue 模板": {
"prefix": "vue",
"body": [
"Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示",
"new Vue({",
//这里可以空格,不可以按制表符,否则报错
" el:'#root',",
" data:{$1",
" }",
"})"
],
"description": "生成 vue 模板"
},
效果:
按Vue后自动生成
5. 多个模板写在一个json文件里也行
{
"生成 console.log 模板": {
"prefix": "log",
"body": [
"console.log($1)"
],
"description": "生成 console.log 模板"
},
//模板间同样用逗号隔开
"生成 vue 模板": {
"prefix": "vue",
"body": [
"Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示",
"new Vue({",
" el:'#root',",
" data:{$1",
" }",
"})"
],
"description": "生成 vue 模板"
},
}