更改 VSCode 扩展中代码的视觉表示答案

【问题标题】：Altering visual representation of code in VSCode extension更改 VSCode 扩展中代码的视觉表示
【发布时间】：2018-10-15 18:09:07
【问题描述】：

我的问题： 有没有办法编写一个扩展来改变 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 的列，而是灵活并与前面和后面的代码行对齐。

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

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

【问题讨论】：

而不是重写所有你可以使用 Markdown 的东西。 [Github 变体}(github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables) 甚至支持表格，我相信 vscode 中的 Markdown 扩展可以显示。
那将无法编译。关键是在代码中执行此操作并让它仍然可以正常编译。我只是想知道如何编写一个 VSCode 扩展来以不同于底层字符的方式显示。我还希望有一天将 >= 绘制为 ≥ 等。我只是找不到像这样显示翻译的 vscode 扩展的任何好的示例或起点。
我知道符号的事情可以用连字来完成。这就是我现在使用的。我只是想知道是否可以在 vscode 中显示翻译。如果没有，那也没关系，我想。
我知道没有这样的功能，如果您在 vscode API 参考 (code.visualstudio.com/docs/extensionAPI/vscode-api) 上没有看到类似的功能，那么可能是不可能的。

标签： visual-studio-code vscode-extensions

【解决方案1】：

我找到了一种 hack-ish 方法。不理想，因为渲染不稳定。

创建一个装饰器类型的扩展。定义装饰类型时，设置字母间距（文本情况下为不透明度），基本上使匹配的内容不可见且无空格

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

稍后设置装饰时，让您的装饰选项对象设置之前和之后的文本，本质上为您的装饰提供新文本

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);

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

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

【讨论】：