Skip to content

hago-slack-helper

介绍

hago-slack-helper is a VS Code extension for HAGO FETEAM

特性

代码片段可视化管理，支持vue, typescript, javascript, sass, slack-plus等代码片段预设
预览图片，支持远程图片和unocss原子类预览
切图素材管理
动画预览，支持svga和mp4
css转换成unocss原子类
多语言快速预览/未翻译文案检测

快速上手

`snippets`

点击进入插件，左侧上方显示所有自定义的代码片段，点击可直接插入
点击顶部可以打开snippets编辑页面，对snippets进行增删查改，点击copy按钮可向当前编辑器插入代码片段
支持vscode默认的prefix + tab方式快捷插入
支持选中编辑器内容后，右键快捷添加snippets

`image`

使用 image snippets

打开一个目标编辑器
右键选择资源中的一张图片
选择复制图片片段代码
粘贴至目标编辑器

支持自定义配置或读取 snippets 配置

修改 configslack.ImageSnippetTemplate,添加变量｜在自定义 snippets 中增加包含${img_url}的代码
打开一个目标编辑器
右键选择资源中的一张图片
选择复制图片片段代码
粘贴至目标编辑器

支持${img_url}变量并自动填写${img_width}和${img_height}

项目中${img_url}将会增加标记位, 选择快速修复 || 框选包含变量的内容，右键->选择选择图片并替换变量
选择一张图片(.png||.jpg)

支持hover图片地址,预览图片

鼠标移动到图片地址，自动预览图片
支持定位文件和打开目标文件
支持 alias
支持读取图片的大小和尺寸

配置

name	type	default	description
slack.ImageSnippetTemplate	["string", "array"]	["@include bg('`${img_url}`', `${img_width}`px, `${img_height}`px);"]	Customize image snippets template,support `${img_url}` `${img_width}` `${img_height}`

指令

slack.openWebview 打开slack-helper的 webview 界面
slack.openSnippets 打开slack-helper全局 snippets 配置
slack.reset 拉取团队 snippets 配置，重载slack-helper的本地缓存
slack.clean 清除slack-helper本地缓存
slack.selectImageCoverVariableByAction 选择图片并替换当前行(+-5)内容中的图片变量
slack.copyImageSnippet 选择图片并替换Rang中的图片变量