前言

查看旧有的代码，发现了以前玩css这个库留下来的一些代码。突发奇想，也许我可以做一个sass + react的className提示，补全一下我总是需要打开两个tab来看类名的囧境。（当然这意味着我的css的命名并不是很好）

设计

整体的设计其实很简单。此时看了一下常见的一些插件实现。

获取当前的文件 ⇒ 解析其当前 import 的 sass/css/scss 文件 ⇒ compile sass file ⇒ 获取所有的类名 ⇒ 进行提示。

代码层面的问题就不必深究了，大概这么个过程。

打包发布

扩展的发布需要几步

1. 注册微软家账号
2. 注册一个Azure的devOps group 获取access_token
3. 在vscode extension marketing创建一个 publish user account
4. 本地使用 npm install -g vsce
5. vsce login
   1. enter access_token
6. vsce publish

注意

遇到一些卡点

1. 插件发布平台是锁定的，意味着当你上传插件版本后，即使你撤销了这个应用，再发布了一个一样的插件版本，但是仍然是旧的发布版本的。
2. 创建Access Token的时候必须要保证选择的是 All accessible organizations

最后

看到也有别的类似自动补全的功能，但是出发点还有略有差异。(原有的一些extension是基于目录结构去推导推荐类名)

所以，这简单的就发布了一个自己的 vscode 扩展啦

github repo: https://github.com/ZWkang/vscode-className-completion

vscode extension: className completion 插件

---

Contact Me

all encode by base64

• Email: a2FuZzk1NjMwQGdtYWlsLmNvbQ==
• QQ: OTA3NzQ3ODc0QHFxLmNvbQo=
• twitter: d2thbmdfelpa

  Email: a2FuZzk1NjMwQGdtYWlsLmNvbQ=

  by zwkang

  original url: https://zwkang.com

  ---

转载需注明出处与作者

否则将被视为侵权

Reprinting must indicate the source and author

Otherwise it will be regarded as infringement