1. 简介

cloud 在less 内使用了很多的 theme 变量，但是这些变量没有颜色标签和变量值，导致开发的时候不能知道到底是什么颜色。借助vscode 可以开发一款插件这样就能看到颜色效果

下图是没有颜色效果。

而且在设计的design 有很多颜色其实是主题颜色，但是每次手动修改需要找到对应的主题颜色var 修改不方便. 借助 vscode 插件在将下面的代码黏贴到 less 文件的实现颜色到 theme color var 的修改。

开启插件之后

颜色tooltip

复制设计 color 到 less 文件自动转换成 theme var 变量

从设计

黏贴到 less 文件之后

2. vscode 开发步骤

具体有如下步骤

ZStackColorThemeProvider 内实现了提供颜色和颜色标签的方法


provideDocumentColors	设置要显示的颜色从当前less 文件内获取到 theme 相关的 var 名称，这些名称都是固定的。将获取的变量信息：行号，列的范围，和颜色构建 ColorInformation ，最后将 ColorInformation 的数组结果返回，vscode 就能显示对应变量的颜色
provideColorPresentations	设置鼠标挪到颜色之后，显示的颜色标签这个方法是在上面方法的数据上返回的。可以拿到上面方法的行号和列的信息，然后从文本内容内拿到对应的字符串值，这些值就是 less theme 对应的名称值。然后获取对应 theme 的颜色字符串。将颜色字符串构建 ColorPresentation ，将 ColorPresentation 数组内容返回。vscode 就会显示 hover 到对应颜色上面的时候显示这个颜色值
workspace.onDidChangeTextDocument	实现黏贴的时候，修改主题颜色成主题颜色 var onDidChangeTextDocument在文件内容修改的时候触发，可以拿到修改的数据内容。拿到数据内容之后和 env.clipboard 内容比较是否是将内容黏贴修改导致的文件内容修改，然后得到修改的内容的行号和列好信息，获取修改内容内是主题颜色的的字符串，对当前的编辑器 window.activeTextEditor 使用修改 api editor?.edit 编辑修改的的内容到文档。