Question

我的问题：有没有一种方法可以编写扩展来更改vscode显示的内容而无需更改基础代码？ Vscode似乎有很多不同类型的扩展名，我很难找到从哪里开始。

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

ASCII中的“ tab”字符实际上是“水平制表”键。它最初旨在与“垂直制表”结合使用来制作表格。您的打印机/终端将具有HT和VT字符可以前进到的列和行停止点。恢复Tab键的原始用途会很酷。换句话说，代码编写如下：

data.table

因此，可以通过查看后续行并尝试对齐水平制表符之后的所有内容来神奇地对齐制表符。 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);

您基本上已经替换了文本。（需要更多的扫描才能为我所需的实现获取正确的空格数，但这实际上不是问题的一部分。）此实现不是非常理想，因为装饰需要一秒钟才能呈现和更新。当代码扩展是文档格式的关键时，这会使代码扩展变得难看。

更新说明：描述符似乎对空白很挑剔。他们将删除描述符前后除一个空格外的所有空格，并删除所有换行符。这意味着您必须放入“ _”之类的字符，并用“颜色”使描述符文本不可见，以获取一堆空格，而您实际上无法获得换行符……甚至更hack-ish且较不理想。

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

1 个答案: