首页 > 网络编程 > JavaScript > javascript技巧 > VS Code使用Snippet Craft编码效率

在VS Code中使用Snippet Craft扩展提高编码效率的过程详解

2024-08-23 09:01:04 作者：林晓lx

这篇文章主要介绍了在VS Code中使用Snippet Craft扩展提高编码效率,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下

Snippet Craft

一个VS Code代码片段管理插件

功能

创建和插入代码片段

在编辑器区域右键菜单中点击插入Snippet，或在代码片段视图中点击条目，则会将代码片段插入到当前激活文档的光标位置。

代码片段编辑

代码片段在左侧栏中，根据创建时的文件内容类型，分组显示代码片段，可编辑已有的代码片段。

代码片段预览

鼠标移动到代码片段条目上时，显示tooltip预览

默认映射

映射是插入代码片段时，自动替换的变量。

代码片段中通过设置占位符${VAR_NAME}，在插入代码片段时，将自动替换为全局变量中的值。可用的映射如下表：

类别	变量	描述
文件和编辑器相关	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	打开的工作区或文件夹的路径
	CURSOR_INDEX	基于零索引的游标编号
	CURSOR_NUMBER	基于单索引的游标编号
时间相关	CURRENT_YEAR	本年度
	CURRENT_YEAR_SHORT	当年的最后两位数字
	CURRENT_MONTH	两位数字的月份（例如“02”）
	CURRENT_MONTH_NAME	月份的全名（例如“July”）
	CURRENT_MONTH_NAME_SHORT	月份的简短名称（例如“Jul”）
	CURRENT_DATE	以两位数字表示的月份中的某一天（例如“08”）
	CURRENT_DAY_NAME	日期的名称（例如“星期一”）
	CURRENT_DAY_NAME_SHORT	当天的简短名称（例如“Mon”）
	CURRENT_HOUR24	小时制格式的当前小时
	CURRENT_MINUTE	两位数的当前分钟数
	CURRENT_SECOND	当前秒数为两位数
	CURRENT_SECONDS_UNIX	自 Unix 纪元以来的秒数
	CURRENT_TIMEZONE_OFFSET	当前 UTC 时区偏移量为 +HH 或者 -HH (例如“-07:00”)
其他	RANDOM6	6 个随机 Base-10 数字
	RANDOM_HEX6	6 个随机 Base-16 数字
	UUID	第四版UUID

注意：当自定义映射值未设置或者不可用时，将直接显示变量占位符

自定义映射

扩展初始化时，插入了三个常用的自定义映射，你可以自由更改或添加自定义映射。

示例：

代码片段内容

value of 'AUTHOR' is: ${AUTHOR}
value of 'COMPANY' is: ${COMPANY}
value of 'MAIL' is: ${MAIL}
value of 'FOOBAR' (non-exist) is: ${FOOBAR}

插入代码片段后，显示如下：

value of 'AUTHOR' is: 林晓lx
value of 'COMPANY' is: my-company
value of 'MAIL' is: jevonsflash@qq.com
value of 'FOOBAR' (non-exist) is: ${FOOBAR}

与自定义映射一样，当默认映射值未设置或者不可用时，将直接显示变量占位符

自动完成

代码片段可在编辑器中显示自动提示和补全内容。

快速开始

通过点击上方横幅上的安装按钮安装 Snippet Craft，或在 VS Code 的扩展侧边栏中搜索 Snippet Craft 进行安装。

更新内容

Date	Version	Content
V0.1.0	2024-8-22	初始版本

Todo 支持更多语言使用monaco-editor 导入导出功能作者信息

作者：林小

邮箱：jevonsflash@qq.com

License

The MIT License (MIT)

项目地址

Github:snippet-craft