定制vscode扩展
为自己定制的vscode扩展，记录并实现一些想法，丰富vscode的使用体验。
功能
自定义背景图
灵感来源于另一个设置背景图的扩展(background-cover)
背景图目录
使用介绍 ⬆
- 上传图片：
安装完扩展后，侧栏会出现此图标
点击此图标，会进入操作页面，上传图片有两种方式：本地图片和网络图片
本地图片直接从文件夹选择，网络图片需要在输入框内输入图片地址，图片上传成功后会在下方的列表中显示
- 设置背景：
点击图片列表的任意图片，弹框选择确认就成功设置背景，应用背景需要右下角弹框内选择重启窗口。
- 删除图片：
点击图片左上角的删除按钮就可以删除此图片，如果删除了当前设置的背景图，背景样式不会因此消失，仍可以正常显示，直到下一次切换背景。
- 多选操作：
点击图片左上角可以选中一张图片，选中的图片可以进行两种操作，一是同时删除，二是随机切换选中图片（下一条）
选中了一张图片后，可以进行全选和取消全选的操作
- 随机切换：
除了可以设置某张图片为背景，还可以设置多张图片在每次打开软件时切换背景。方式有两种：
1、随机切换所有图片，不选中任意图片，点击
随机切换（全部）按钮可以切换所有图片的任意一张，设置完成后上传的图片也在切换对象中。
2、随机切换选中图片，选中一张以上图片后，点击`随即切换（选中）`按钮，可以切换选中图片的任意一张，上传图片不会影响，但是如果删除了某一张图片，则不会再切换此图片背景。
- 清除配置：
点击顶部
清除背景图配置按钮可以关闭背景，修改的css文件会被复原，但是上传的图片仍会保存。
- 切换储存路径：
图片列表中的数据默认保存于扩展根目录下，即C盘中，如果需要切换保存文件夹，可以点击顶部
选择图片储存路径按钮，修改了默认路径后会出现重置图片储存路径按钮，可以将储存路径重置回默认路径。
- 设置不透明度：
修改不透明度输入框可以通过输入0.1~1的任意数字回车或者点击对勾完成设置，默认不透明度是0.3，本人体验最舒适。
实现思路 ⬆
- 选择背景图后会将对应bese64数据单独存放于默认或者指定文件夹中，文件名为根据当前时间戳生成的哈希码。
- 网络图片通过axios api进行下载，下载完成后同样会将文件base64输入存入指定路径下，并生成一个文件名。
- 每新增一张图片，就会将对应哈希码放入缓存数组内，后续新增、删除、修改操作都需要操作或者利用此数组。
- 设置背景图需要操作vscode的样式源文件，在vscode node执行环境(module指向的对象)路径下的
vs/workbench目录内，需要修改的有两个文件。
- vscode的样式文件，需要在文件顶部插入一条css的导入语句
@import url("css url")用来导入设置背景的样式文件。
- 设置具体背景样式的css文件，此文件是有程序自己创建，设置背景的样式、动画和背景图base64数据（设置背景不会引用外部图片的路径，而是直接将图片的base64数据赋值给
background-image属性）。
- 开发中，更换背景图后实际背景可能会没有切换，这是因为css文件会被缓存。源文件导入外部背景文件后会将此文件缓存，如果没有进行任何操作，下次打开软件时只会加载缓存文件的背景图。因此对源文件导入css的路径添加了一个
?time stamp，在路径后加一个时间戳，只要有另外的的修改就会更新时间戳从而重新加载文件。
- 侧栏webview操作页面加载顺序：插件激活后，注册webview页面；webview页面开始加载，加载完成后发送通信请求图片数据；接收到图片信息后先进行图片加载渲染，加载完成后以队列形式执行其余加载透明度、加载当前背景图等方法。
- 设置背景不透明度，思路同样来自background-cover，因为背景设置是通过修改body背景，而body又被一个div（即工作台容器）定位遮盖，所以要想背景被看见，需要让div变得透明，设置body或者工作台div的opacity属性都可以。目前背景图不透明度选择的范围是0.1~1，要想背景图越透明，上层div容器就越不透明，因此给body设置0.9~0.5的透明度，图片的0.1对应body的0.9，以此类推。
体验问题 ⬆
- 官方不建议对vscode的源码进行补丁行为（具体可以点此查看），因此当修改背景图导致css文件被修改后，会被后台检测到，从而弹出一个警告（如下）。解决方法可以通过点击弹框右上角的设置按钮选择‘不再弹出’，当然这样操作如果有预期之外的文件修改同样不能发现。（似乎可行的方法，有待尝试）
- 背景图的显示是通过设置body背景样式，而图片的透明状态是通过修改工作台div的不透明度，所以会存在工作台的所有元素都会变得透明这个问题，无论是图片还是代码都会比深色背景看起来更费劲，如果不喜欢这种体验则最好不要进行背景图的设置。目前的想法是可以对工作台div容器的before伪元素进行背景设置，保持容器不透明度不变，后续尝试能否优化。
webview页面开发 ⬆
- 开发webview页面需要通过实现
WebviewViewProvider内的resolveWebviewView方法，将html文本赋值给webview的html属性，为了实现普通的html开发体验，我使用node编写了一个脚本，每次编译时会将指定webview开发目录下的文件进行遍历，提取html文件获取文本内容，根据脚本符#js、#css获取设置引用js、css文件的位置，并根据根目录生成正确的引用路径进行脚本符替换；而在测试中发现css、js文件只能引用一个路径，所以为了进行文件的拆分开发，同样使用脚本将js、css目录下的文件分别遍历，获取文本内容进行排序合并，并写入于html同级目录下创建的index.css、index.css文件中。至此，可以像普通的html项目一样使用html、css、js进行开发。
当前版本使用此方法进行webview开发仍有优化点，因为设计过程中未进行考虑，所以目前只能在生产环境中进行实时文件合并，虽然加上了对生产环境进行版本校验，但更新版本后的合并操作仍然属于不必要的开销。
目前的想法是，后续版本新增一个打包命令，文件合并完成后再将所有文件推送上传，这就需要将判断方法改为：1、如果是开发环境，直接调用合并方法；2、如果是生产环境，打包前先调用合并方法进行合并，而后再打包推送；3、合并方法内的版本校验可以删除，同时修改注册webview方法内的调用顺序；4、尝试对js和css文件进行简单压缩。
| |
