更改 VSCode 扩展中代码的可视化表示形式

Question

我的问题：有没有办法编写一个扩展来更改vscode显示的内容而不更改底层代码？Vscode 似乎有很多不同类型的扩展，我很难找到从哪里开始。

上下文：我想尝试编写一个我已经有一段时间的想法的vscode扩展。(如果它已经存在，请告诉我。

ASCII 中的"制表符"实际上是"水平制表"键。它最初是为了与"垂直制表"一起制作表格。您的打印机/终端将有一个列和行停止点，HT 和 VT 字符可以前进到该停止点。恢复 Tab 键的原始用途会很酷。换句话说，代码是这样编写的：

On the disk:
#␉Comment␉Here␉for␉Columns␊
thing =␉"howdy",␉"doody",␉"mein froind",␉"!"␊
␉" I love",␉"what you've",␉"done with",␉"the place";␊
What's displayed (vertical line would be partly transparent):
#       | Comment    | Here           | for            | Columns
thing = | "howdy",   | "doody",       | "mein froind", | "!"
| " I love", | "what you've", | "done with",   | "the place";

因此，可以通过查看后续行并尝试对齐水平制表符后面的任何内容来神奇地对齐制表符。Tab 将不再表示宽度为 8 或 4 的列，而是灵活并与上一行和后续代码行对齐。

这意味着您无需手动对齐任何内容。您也可以使用它，以便最大行长度溢出自动换行和自动对齐选项卡。我可能会避免使用垂直制表符，因为大多数代码解释器可能无法正确忽略它。不过，大多数人应该忽略常规的水平选项卡。

那么，这将是什么类型的扩展？如何显示与磁盘上不同的代码？提前谢谢。

Answer 1

我找到了一种黑客式的方法。不理想，因为渲染断断续续。

创建修饰器类型扩展。定义装饰类型时，设置字母间距(对于文本，则为不透明度(，基本使匹配的内容不可见且无空格

const tabDecorationType = vscode.window.createTextEditorDecorationType({
letterSpacing: '-1em',
opacity: '0'
});

稍后设置修饰时，让 DecorationOptions 对象设置前后的文本，以便实质上为修饰提供新文本

const regEx = /t/g;
const text = activeEditor.document.getText();
const tabs: vscode.DecorationOptions[] = [];
let match;
while (match = regEx.exec(text)) {
const startPos = activeEditor.document.positionAt(match.index);
const endPos = activeEditor.document.positionAt(match.index + 1);
const decoration: vscode.DecorationOptions = {
range: new vscode.Range(startPos, endPos),
renderOptions: {
after: {contentText: "| "},
before: {contentText: "  "}, // <-- replace with correct number of spaces
}
};
tabs.push(decoration);
}
activeEditor.setDecorations(tabDecorationType, tabs);

而且您基本上已经替换了文本。(需要更多的扫描才能为我想要的实现获得正确数量的空间，但这不是问题的一部分。这种实现不是很理想，因为渲染和更新装饰需要一秒钟。这使得代码扩充在对文档格式设置至关重要时有点难看。

更新说明：描述符似乎对空格很挑剔。他们将删除描述符前后除一个空格之外的所有空格，并删除任何新行字符。这意味着您必须放入一些像"_"这样的字符，并使用"颜色"使描述符文本不可见才能获得一堆空格，并且您无法真正获得换行符......甚至更像黑客，更不理想。