时间戳

首页 > 解决方案 > 更改 VSCode 扩展中代码的视觉表示

visual-studio-code - 更改 VSCode 扩展中代码的视觉表示

问题描述

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

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

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

标签： visual-studio-codevscode-extensions

解决方案

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

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

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

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

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

推荐阅读