vscode中自定义代码方法

vscode中自定义代码方法

1 什么是自定义代码

vscode中用户可以对常用的代码片段进行编辑和保存，在使用时输入关键字能进行提示，大大提高了我们的工作效率，也保证自己的风格以及习惯。、

2 怎么自定义代码

1. 进入设置-用户代码片段
2. 选择代码的语言
3. 可以看到注释中有一个例子，

具体如下:

 "Print to console": {		//触发的提示信息
	 	"prefix": "log",	//触发的关键字
	 	"body": [			//代码片段
	 		"console.log('$1');",
	 		"$2"
	 	],
	 	"description": "Log output to console"	//描述内容
}

3 自定义代码的技巧

1. tab位置
   使用$1 , $2 等代表tab的位置，tab0为最后一个
2. 使用转义字符
   在代码中使用\t （tab键） \r (回车) \n (换行) 等代替空格方便管理代码格式
3. 使用提示注释
   在代码中使用 ${1:我是注释内容}
4. 使用枚举选择
   在代码中使用 ${1|张三,李四,王五|}

4 如何自定义长代码

github上snippet-generator项目，可以利用该项目来转义长代码。
然后将转义后的长代码复制到我们的代码片段中即可

5 如何定义特殊片段

在我们使用片段中，经常会使用到自定义的文件注释头，而这里面我们经常会用到日期，日期是动态的，而在vscode中定义了这些特殊的变量

  "header comment": {
    "prefix": "hc",
    "body": [
      "$BLOCK_COMMENT_START",
      " * Author:AlenZhong",
      " * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "$BLOCK_COMMENT_END",
    ],
    "description": "文件头部注释"
  },
//  最后的效果

/*
 * Author:AlenZhong
 * Date: 2021-06-18
*/

上例中使用了五个变量
$BLOCK_COMMENT_START
$CURRENT_YEAR
$CURRENT_MONTH
$CURRENT_DATE
$BLOCK_COMMENT_END

除此之外，vscode还提供了很多变量,地址

6 第三方代码片段

JavaScript（ES6） Code snippets
…