mmecvscodeext 小店前端定制VSCode插件

✨ Features

• CSS/Less/Sass 色板值补全/反向索引
• 支持跳转到 behaviors 中声明的方法（目前仅支持一级嵌套）

👀 Showcase

内部色板智能补全

粘贴 RGB 值反向查找变量名

适用文件类型：css/less/scss

• 粘贴 rgba/rgb 时，如果是已有色板里的匹配值，提供补全
• 检测到输入 color/background-color 这类颜色属性时，在冒号后面提供已有色板的颜色补全（如果匹配到多个变量，会展示多个候选）
• 选中补全项，会把当前输入的值替换成形如 var(--Glyph_1) 这样的表示
• 在多个候选项中选择时，可继续输入来进一步筛选，也可以停留在详情面板查看色块预览

📝 TODO

• [ ] 处理 behaviors: [genBehavior({...})] 这种情况，需要找到函数，跳转到函数定义里，在 Behavior 构造器中找方法定义
• [ ] 处理嵌套跳转的情况，例如一个组件集成了 behaviorA，behaviorA 内部又集成了 behaviorB, behaviorC，此时组件中的方法 this.someMethod 可能存在于 behaviorC 中，需要按引用拓扑序去查询
• [ ] 识别可能的根构造器，目前 C 端有 Component, Page, Behavior； A 端有 WXAPage
• [ ] 提供无障碍 attributes 辅助插入能力

⌨️ Usage

require VSCode >= 1.80.0

Tip: Cursor 点左上角「关于」也能看到 VSCode 的版本

VSCode

前往应用市场安装

Cursor

Command + Shift + P 拉起命令面板输入 vsix，选择 Extensions: Install from vsix 然后选择 .vsix 文件即可

Develop

Init

nvm use 20
pnpm i
pnpm i -g @vscode/vsce # for package/publish

Debugging

pnpm run watch

跑起来后，在VSCode中按F5启动调试模式。

Bundle

pnpm run pack

这将在项目根目录生成一个.vsix文件，可以通过VSCode的扩展管理器手动安装。