前段时间，一不小心发力过猛就改造了一款vscode插件。
起因
在搭建前端架构的过程中，大家都会在项目的入口文件中导入全局样式，进行样式统一，如果有其他个别特殊样式，我们会在单个组件中处理。
然而，麻烦的一点是，我们在使用定义好的样式时，经常要在样式文件和组件文件之间来回切换，因为很多时候我们并不会去记住这些类名，并且vscode自身在这种情况下是不会有提示的。
插件构思
身为一名懂点node，AST、Babel等相关知识的前端程序员，总想为自己打造一款专属的插件，不然白瞎了这一身的能耐，所以我开始构思：自己实现一款css类名提示的插件
实现原理：
- 检索项目中样式文件
- 解析样式文件（如：css，scss，less等）
- 使用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函数，这个函数功能包括：
- 查找工作区下的全部样式文件
- 解析样式文件
- 对类名进行缓存
控制台输出的信息也是从该函数打印的：
找到代码异常点，并输出异常栈信息
可以看到，是 /src/parse-engine-gateway.ts文件中抛出的异常，具体代码行是：
const parseEngine: IParseEngine = ParseEngineRegistry.getParseEngine(textDocument.languageId)
createSimpleTextDocument函数负责读取文件返回文件信息对象，只需要对该函数稍作调整就能实现我们的功能了
改造完毕，开始调试插件，这时控制台已经不再输出解析失败的信息了，提示功能也有了
到这，我们的vscode插件改造也就完成了。
最后通过vsce package命令打包插件，然后将生成的 .vsix插件文件进行本地安装，就能快乐的敲代码了。
如果觉得内容对你有帮助或者有所成长，麻烦请点个小小的赞加收藏，谢谢。 ^o^
