从VS Code官网详细的学习了一下代码片段的配置,使用起来也是非常的方便,可以将一些固定的代码片段配置起来,通过几个快捷的字符输出到编辑器中,高效的编码。
一、插件内置的代码片段
目前有很多的插件都配置有代码片段,下载安装了这款插件就可以直接使用这些代码片段,大大的提高了开发的效率,下面简单的介绍一下插件
下载安装后,就能直接的使用vue组件中定义的Code Snippets代码片段,还有很多其他的插件也是直接这么干的,大家可以自行去看。
二、 自定义配置的代码片段
我们也可以自定义自己的代码片段,并且无需任何的扩展。具体配置如图:
代码片段以JSON格式编写,支持注释,并且还可以定义不限数量的代码段。
// 官网示例:
// in file 'Code/User/snippets/javascript.json'
{
"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
}
在上述的例子中:
For Loop
表示的是当前代码段的名称。
prefix
表示的是触发这个代码片段的快捷命令,可以定义一个或多个快捷命令来触发。
body
表示的是这个代码片段中的主体部分;在其中还有几个占位符:{2:element}
和$0
;可以使用tab键快速跳到下一个占位符位置。
description表示的是这个代码片段中的描述部分,属于可选部分。
三、使用变量:
可以使用$name
或者${name:default}
的形式,未设置的时候会插入默认值或者空字符串,也可以使用一些vscode提供的变量:
TM_SELECTED_TEXT
当前选择的文本或空字符串TM_CURRENT_LINE
当前行的内容TM_CURRENT_WORD
光标下的单词内容或空字符串TM_LINE_INDEX
基于零索引的行号TM_LINE_NUMBER
基于一索引的行号TM_FILENAME
当前文档的文件名TM_FILENAME_BASE
当前文档的文件名,不带扩展名TM_DIRECTORY
当前文件的目录TM_FILEPATH
当前文档的完整文件路径RELATIVE_FILEPATH
当前文档的相对(相对于打开的工作空间或文件夹)文件路径CLIPBOARD
剪贴板中的内容WORKSPACE_NAME
打开的工作空间或文件夹的名称WORKSPACE_FOLDER
打开的工作空间或文件夹的路径
当前时间和日期:
CURRENT_YEAR
本年度CURRENT_YEAR_SHORT
本年度的后两位数字CURRENT_MONTH
以两位数表示的月份(例如“ 02”)CURRENT_MONTH_NAME
月的全名(例如“七月”)CURRENT_MONTH_NAME_SHORT
该月的简称(例如“ Jul”)CURRENT_DATE
一个月中的某天CURRENT_DAY_NAME
一天的名称(例如“周一”)CURRENT_DAY_NAME_SHORT
一天的简称(例如“ Mon”)CURRENT_HOUR
当前小时(24小时制)CURRENT_MINUTE
当前分钟CURRENT_SECOND
当前秒CURRENT_SECONDS_UNIX
自Unix时代以来的秒数
对于插入随机值:
RANDOM
6个随机的Base-10数字RANDOM_HEX
6个随机的Base-16数字UUID
版本4 UUID
要插入行或块注释,请遵循当前语言:
BLOCK_COMMENT_START
输出示例:用PHP/*
或HTML<!--
BLOCK_COMMENT_END
输出示例:用PHP*/
或HTML-->
LINE_COMMENT
示例输出:在PHP中//
例子:
"hello world": {
// "scope": "作用域",
"prefix": "hw",
"body": [
"$BLOCK_COMMENT_START Hello World!!! $BLOCK_COMMENT_END",
"\t$CURRENT_YEAR"
],
"description": "快速键入输入行的代码"
}
/* Hello World!!! */
scope这个属性是一个作用域,写上"scope":"typescript"
这个代码片段就只能在ts文件中使用,目前发现只能写一个才能生效,写错或者不写就全部的文件都能生效。\t在当前位置加一个制表符的效果。