Quattro
项目级别的研发辅助插件。
- Quattro Snippets Helper：项目可复用代码管理。
- Quattor Docs Helper：相关文档插件。
- Quattro SVG Helper: 项目SVG管理插件。
- Quattro CSS Variables Helper: 项目CSS Variables（Design Token）管理插件。
Quattro Snippets Helper
项目级别的可复用代码管理插件，支持智能合并import语句。
功能说明
特点：
- 支持右键调出面板，增删改查 Snippets 片段。
- 支持面板中选择和特定词触发两种插入形式。
- 支持合并 snippets 中的 import 到当前代码。
- 支持根据标题和代码进行搜索。
- 项目级别非全局，构建团队共用的 Snippets。
增删改查，插入等的面板
特定词触发
Quattro Docs Helper
研发文档辅助插件（代码里的相关文档）：根据当前所在文件名和行信息匹配设定的关键词出现相关文档。
核心功能说明
1. 匹配配置的关键词出相关文档
外链形式
Markdown形式
2. 查看所有文档，增删改查关键词和文档
鼠标右键菜单中选择Quattro: 文档管理调出文档管理：
使用建议
建议团队配置统一的外部服务返回文档列表，项目内自有的文档再自行录入。
配置外部服务需要实现一个返回下面数据格式的接口用来集中化管理文档:
其中tags即为触发文章的关键词
type Response = Array<
{
title: string;
url: string;
tags: string[];
} | {
title?: string;
markdown: string;
tags: string[];
}
>
Quattro SVG Helper
项目SVG管理插件，SVG文件引入代码生成。
- 支持配置当前工作区下指定目录下的SVG文件，支持多个配置，支持展示node_modules下的SVG文件。
- 支持优化SVG，减小svg体积。支持去除svg原有颜色，也支持保留颜色。
- 支持配置代码生成，选中SVG后插入的代码（Import的代码和光标所在区域的代码两部分）。
功能
优化svg
通过SVGO对svg进行优化，减小svg体积。
支持去除svg原有颜色，使用fill: currentColor。
使用方式
- 在当前svg右键，调起优化。
- 在文件树上右键svg文件，调起优化。
cmd + p 输入 SVG Optimize 来对当前SVG文件优化。
其他效果
优化后会弹出页面展示优化前后的对比。
展示配置目录下的SVG
右键Quattro: 插入SVG可以启动面板。
代码生成
- 右上角配置生成代码的方法（根据文件名和路径生成代码）。
- 选中一个或多个SVG即可完成代码插入。
Quattro CSS Variables Helper
功能说明
自动补全 + 颜色预览
CSS Variable跳转
修复hex色值
如果直接使用了色值，并且设置已经有了对应的css variables，会有lint提示，通过cmd + . 可以快速修复
这里你需要自行选择一个css variables变量，可以根据场景，选择更语义化的变量
色盘颜色展示和插入颜色
- 打开项目
- 使用快捷键
cmd + shift + p 之后，输入/选择：插入 CSS Variables (输入CSS时会有提示)。（或者鼠标右键，选择Quattro：插入 CSS Variables，来调起）
- 点击右上角小齿轮，配置需要插入的CSS Variables路径（相对路径，相对于workspace目录，即打开的目录)
| |
