vscode之代码片段snippet

ZC修码者
383 阅读2分钟

前言

vscode很轻量，它有很多插件，而基本上你能在vscode编辑的事，对其有想法基本都能用插件解决。

而且我们前端使用的编辑器目前vscode的占用是很大的，所以你在编码上有什么不顺畅，你可以设计个插件去解决。

vscode插件开发api文档

vscode插件可以实现有很多，如:

  • 自定义命令
  • 快捷键
  • 自定义菜单项
  • 自定义跳转
  • 自动补全
  • 悬浮提示
  • 新增语言支持
  • 语法检查
  • 语法高亮
  • 代码格式化
  • 定义 snippet 等等

这次主要实现是代码片段snippet

因为日常开发时除了使用通用的代码片段，还可能使用一些自己常常复制粘贴的业务代码，而每次都要去寻找这个需要粘贴的代码，其实是很浪费时间的，本着机械性工作让程序自动执行的原则，收集一些代码片段，让工作效率更高更好

创建插件

1、 安装脚手架

npm install -g yo generator-code

2、进入项目创建的目录，拉取项目

yo code

3、进入插件的目录

image.png

extension插件入口文件

package插件配置文件

image.png

contributes的配置很重要 如commands命令配置，即命令，通过cmd+shift+p进行输入来实现的，如>shein，会去执行extension注册的指令

而snippets就是代码片段的实现，它是数组的形式，设置好不同的语言对应不同的代码片段，代码片段都是用json编写的

snippet

image.png

  • 都是对象的方式，key值为这个代码片段的名称

  • "prefix"： 前缀，即输入什么可以出现snippets的提示

  • "body"： 按回车后出现的一大段代码，是一个数组，数组里面是字符串，每个字符串代表一行代码，$1表示第一个光标的位置，同样，$2表示第二个光标的位置，还可以有$n，$0为最终的光标位置，相同的占位符会都选中的光标，如两个$1，就会出现两个光标

  • "description"： 对于这个snippet的描述，当我们选中这个snipets提示时，描述会出现在后面。

image.png

变量

变量变量含义
TM_SELECTED_TEXT当前选定的文本或空字符串
TM_CURRENT_LINE当前行的内容
TM_CURRENT_WORD光标下的单词内容或空字符串
TM_LINE_INDEX基于零索引的行号
TM_LINE_NUMBER基于单索引的行号
TM_FILENAME当前文档的文件名
TM_FILENAME_BASE当前文档没有扩展名的文件名
TM_DIRECTORY当前文档的目录
TM_FILEPATH当前文档的完整文件路径
CLIPBOARD剪贴板的内容
WORKSPACE_NAME已打开的工作空间或文件夹的名称
CURRENT_YEAR当前年份
CURRENT_YEAR_SHORT当前年份的最后两位数
CURRENT_MONTH月份为两位数（例如'02'）
CURRENT_MONTH_NAME月份的全名（例如'June'）（中文语言对应六月）
CURRENT_MONTH_NAME_SHORT月份的简称（例如'Jun'）（中文语言对应是6月）
CURRENT_DATE这个月的哪一天
CURRENT_DAY_NAME当天是星期几（例如'星期一'）
CURRENT_DAY_NAME_SHORT当天是星期几的简称（例如'Mon'）（中文对应周一）
CURRENT_HOUR24小时时钟格式的当前小时
CURRENT_MINUTE当前分
CURRENT_SECOND当前秒

可以使用变量，如{变量}，如{TM_FILENAME_BASE}获取到文件名

当获取到的内容为可选时可以设置一个默认值${TM_FILENAME_BASE:default}

我们还可以使用正则去替换某些内容

如example-123.456-TEST.js。

例子输出解释
"${TM_FILENAME/[\.]/_/}"example-123_456-TEST.js将第一个替换.为_
"${TM_FILENAME/[\.-]/_/g}"example_123_456_TEST_js替换每个.或-``_
"${TM_FILENAME/(.*)/${1:/upcase}/}"EXAMPLE-123.456-TEST.JS改为全部大写
"${TM_FILENAME/[^0-9^a-z]//gi}"example123456TESTjs删除非字母数字字符

调试按下F5即可，它会打开一个新窗口，然后里面进行调试

打包

npm install -g vsce

vsce package

这一步会打包出一个vsix文件，然后使用vscode的code给它安装插件

code --install-extension shein-snippet-0.0.1.vsix

最后这只是本地开发的方式，如果要发的应用市场，需要注册拿到token后把插件上传上去，但自己项目内玩，最好还是把打好的包进行安装

avatar
文章
阅读
粉丝