Vscode插件改造，就这？？？

前段时间，一不小心发力过猛就改造了一款vscode插件。

起因

在搭建前端架构的过程中，大家都会在项目的入口文件中导入全局样式，进行样式统一，如果有其他个别特殊样式，我们会在单个组件中处理。

然而，麻烦的一点是，我们在使用定义好的样式时，经常要在样式文件和组件文件之间来回切换，因为很多时候我们并不会去记住这些类名，并且vscode自身在这种情况下是不会有提示的。

插件构思

身为一名懂点node，AST、Babel等相关知识的前端程序员，总想为自己打造一款专属的插件，不然白瞎了这一身的能耐，所以我开始构思：自己实现一款css类名提示的插件

实现原理：

1. 检索项目中样式文件
2. 解析样式文件（如：css，scss，less等）
3. 使用vscodeAPI实现类名提示

IntelliSense for CSS class names in HTML插件

后来，我又想，vscode插件生态那么丰富，肯定有现成的可以直接用，就这样，我了解到IntelliSense for CSS class names in HTML这款插件

插件的安装使用非常简单：

vscode扩展中搜索 “IntelliSense for CSS class names in HTML” 进行插件安装

当我们通过vscode打开项目时，插件会自动检索解析样式文件，然后进行样式类名的缓存，缓存完毕，我们再在class属性值中输入空格，就会有类名的提示

插件存在的问题

大部分时候我们都会选择在项目中使用sass或less这种预处理语言，这个时候，插件的提示功能就不生效了

打开使用说明文档：

根据说明文档得知，该插件对sass等这类预处理语言基本不支持。但是我又看了下这个插件的用户安装量：

看完，觉的这个插件肯定还是不错的，不然怎么会有这么多人选择

重点来了！！！重点来了！！！重点来了！！！

插件改造

既然插件能支持css语法，那么，通过sass或者node-sass库把sass语法编译成css语法，插件不就能支持了嘛（这里因为我使用的是sass语法所以选sass或node-sass库处理），我可真是太聪明了。

说干就干，首先，把IntelliSense for CSS class names in HTML插件源码clone到本地，然后安装好依赖

运行插件，vscode会自动打开一个新的窗口让我们进行调试，然后打开我们的vue项目

终端控制台输出 .scss文件解析失败：

打开源码 /src/extension.ts文件

在文件中找到chache函数，这个函数功能包括：

1. 查找工作区下的全部样式文件
2. 解析样式文件
3. 对类名进行缓存

控制台输出的信息也是从该函数打印的：

找到代码异常点，并输出异常栈信息

可以看到，是 /src/parse-engine-gateway.ts文件中抛出的异常，具体代码行是：

const parseEngine: IParseEngine = ParseEngineRegistry.getParseEngine(textDocument.languageId)

createSimpleTextDocument函数负责读取文件返回文件信息对象，只需要对该函数稍作调整就能实现我们的功能了

改造完毕，开始调试插件，这时控制台已经不再输出解析失败的信息了，提示功能也有了

到这，我们的vscode插件改造也就完成了。

最后通过vsce package命令打包插件，然后将生成的 .vsix插件文件进行本地安装，就能快乐的敲代码了。

如果觉得内容对你有帮助或者有所成长，麻烦请点个小小的赞加收藏，谢谢。 ^o^