- 官方文档
- 插件商店
- 需要注册的账户地址：
- 微软账户：account.microsoft.com/?lang=zh-CN…
- 发布账户：dev.azure.com/macondoly/_…
- 发布账户：marketplace.visualstudio.com/manage/publ…
- 插件地址：marketplace.visualstudio.com/items?itemN…
- 需求：实现一个vs code插件：在css文件中，监听粘贴代码事件，粘贴代码时，根据项目中指定variables.css文件以及指定的映射表，替换被粘贴代码中的指定css变量引用
- 创建VS Code扩展项目：首先，你需要创建一个新的 VS Code 扩展项目。你可以使用命令
yo code（前提是已经安装了 Yeoman 和 VS Code 扩展生成器）来生成一个新的扩展项目。 - 监听粘贴事件：在你的扩展中，你需要监听 CSS 文件中的粘贴事件。你可以使用 VS Code 提供的 API 来注册监听器，在 CSS 文件中监听粘贴事件。
- 解析粘贴内容：当粘贴事件发生时，获取粘贴的内容，并解析其中的 CSS 变量引用。
- 根据映射表替换变量引用：使用项目中指定的 variables.css 文件和映射表，将粘贴的代码中的 CSS 变量引用替换为对应的值。
- 更新编辑器内容：将替换后的代码更新到编辑器中。
示例代码：
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
// 注册粘贴事件监听器
let disposable = vscode.workspace.onDidChangeTextDocument(event => {
let editor = vscode.window.activeTextEditor;
if (editor && event.document.languageId === 'css') {
let pasteEvent = event.contentChanges.find(change => change.text.includes('paste'));
if (pasteEvent) {
// 解析粘贴的内容
let pasteContent = pasteEvent.text;
let replacedContent = replaceVariables(pasteContent);
// 更新编辑器内容
editor.edit(editBuilder => {
editBuilder.replace(pasteEvent.range, replacedContent);
});
}
}
});
context.subscriptions.push(disposable);
}
function replaceVariables(content: string): string {
// 根据映射表替换变量引用
// 这里只是一个示例，实际上需要根据项目中指定的 variables.css 文件和映射表来进行替换
let variableMap: { [key: string]: string } = {
'--primary-color': '#007bff',
'--secondary-color': '#6c757d'
// 其他变量
};
let replacedContent = content;
Object.keys(variableMap).forEach(variable => {
let regex = new RegExp(`var\(${variable}\)`, 'g');
replacedContent = replacedContent.replace(regex, variableMap[variable]);
});
return replacedContent;
}
调试效果图
调试过程中的问题
- 调试过程中遇到F5不唤起Extension Development Host Window,初步推断是因为vs code的缓存问题，解决办法：在开发的窗口中，使用扩展名重新加载（在Mac上为“Ctrl + R”或“Cmd + R”）VS Code窗口以加载您的更改。此时再按F5可正常弹出。
在debug console查看日志
更多调试技巧参考：blog.haoji.me/vscode-plug…
- vsce package 不能使用pnpm作为包管理工具，会报错npm ERR:missing 需要切换至npm
