visual-studio-code - 在 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);

你基本上已经替换了文本。 (需要更多的扫描才能为我想要的实现获得正确数量的空间，但这实际上并不是问题的一部分。)这种实现并不是非常理想，因为装饰需要一秒钟的时间来呈现和更新。当它们是文档格式的关键时，这使得代码增强有点难看。

更新说明:描述符似乎对空格很挑剔。他们将删除描述符前后的所有空格，并删除所有新行字符。这意味着你必须放入一些像“_”这样的字符，并用“颜色”使描述 rune 本不可见，以获得一堆空白，你不能真正得到一个换行符......甚至更多hack-ish和不太理想。