VS Code扩展触发后如何更新选区以包含开头的/*？

问题分析 #

通过WorkspaceEdit将选中的CSS代码包裹为注释后，选区仅保留原内容范围，未包含新增的/* 和 */。原因是applyEdit仅负责修改文本，不会自动更新编辑器选区，需手动调整选区范围。

解决方案 #

文本替换完成后，根据新注释内容的长度重新计算并设置编辑器选区，确保覆盖整个注释内容。

修改后的代码 #

const selection = editor.selection;
const text = editor.document.getText(selection);
const modText = "/* " + text + " */";

let edit = new vscode.WorkspaceEdit();
let range = new vscode.Range(selection.start, selection.end);
edit.replace(editor.document.uri, range, modText);

// 应用编辑后更新选区
return vscode.workspace.applyEdit(edit).then(() => {
    // 计算完整注释的起止位置
    const startPos = selection.start;
    const startOffset = editor.document.offsetAt(startPos);
    const endOffset = startOffset + modText.length;
    const endPos = editor.document.positionAt(endOffset);
    
    // 设置覆盖整个注释的新选区
    editor.selection = new vscode.Selection(startPos, endPos);
});

代码说明 #

• 直接使用原选区的start和end创建替换范围，简化行号计算逻辑
• 借助offsetAt和positionAt方法精准计算新选区的结束位置，避免手动处理换行符的复杂操作
• 在applyEdit的Promise回调中设置选区，确保文本替换完成后再更新选区，避免时序问题

内容的提问来源于stack exchange，提问作者cycle4passion