脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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”)
其他RANDOM66 个随机 Base-10 数字
RANDOM_HEX66 个随机 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 进行安装。

更新内容

DateVersionContent
V0.1.02024-8-22初始版本

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

作者：林小

邮箱：jevonsflash@qq.com

License

The MIT License (MIT)

项目地址

Github:snippet-craft

您可能感兴趣的文章:

相关文章

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    这篇文章主要为大家详细介绍了js+canvas代码雨效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • bootstrap滚动监控器使用方法解析

    bootstrap滚动监控器使用方法解析

    这篇文章主要为大家详细解析了bootstrap滚动监控器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript中常见的几种获取元素的方式

    JavaScript中常见的几种获取元素的方式

    这篇文章主要介绍了JavaScript中常见的几种获取元素的方式,需要的朋友可以参考下
    2023-05-05
  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    在网站开发过程中，经常会调用到地图，百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用，本文就详细的介绍一下，感兴趣的可以了解一下
    2021-07-07
  • javascript实现检验的各种规则

    javascript实现检验的各种规则

    这篇文章主要介绍了javascript实现检验的各种规则,涉及javascript针对手机号、邮箱、网址、汉字及图片等相关检测技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js实现表格数据搜索

    js实现表格数据搜索

    这篇文章主要为大家详细介绍了js实现表格数据搜索，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 浅谈setTimeout 与 setInterval

    浅谈setTimeout 与 setInterval

    实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的
    2015-06-06
  • js判断为空Null与字符串为空简写方法

    js判断为空Null与字符串为空简写方法

    最近开始研究JavaScript的简写方法，下面就是有关判断为空的简写方法
    2014-02-02
  • 浏览器无法运行JAVA脚本的解决方法

    浏览器无法运行JAVA脚本的解决方法

    2008-01-01
  • 浅谈Webpack下多环境配置的思路

    浅谈Webpack下多环境配置的思路

    这篇文章主要介绍了浅谈Webpack下多环境配置的思路，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论