如何在 vscode 中实现自己的代码大纲布局?

Posted

技术标签:

【中文标题】如何在 vscode 中实现自己的代码大纲布局?【英文标题】:How can I implement my own code outline layout in vscode? 【发布时间】:2018-06-26 15:41:00 【问题描述】:

我正在寻找 Visual Studio Code (vscode) 中的扩展,我可以在其中定义我的自定义代码大纲。本质上,以树状方式列出我所有的函数/定义。

假设我正在使用如下所示的简单语言:

begin foo1 arriving procedure
  move into queue1
  print queue1
  send to foo2 
end

begin foo2 arriving procedure
  move into queue2
  print queue2
  send to foo3
end

我想知道是否有 vscode 的扩展可以让我实现这样的东西:

如果可以点击就好了。导航/转到定义,并且可以在更复杂的代码的情况下进行扩展。

到目前为止我发现了什么。

    vscode 代码大纲 https://github.com/patrys/vscode-code-outline ,我喜欢这个扩展,但它不适用于我的语言。 Example image for a .js file

    显示函数 https://marketplace.visualstudio.com/items?itemName=qrti.funclist

    Sourcecookifier 用于记事本++(可以做我想做的事,但显然是记事本++)

我喜欢第二个扩展(显示函数),因为它可以在 vscode/settings 文件中轻松自定义。您可以从设置中定义自己的正则表达式。但是,它不在编辑器中固定的大纲视图中。现场也不爽。

我也喜欢第一个扩展,因为它在树视图中,但我似乎不知道如何以及在哪里修改设置以实现我所描述的布局。

如果有人能指出我正确的方向,将不胜感激。我已经对代码大纲扩展的文档进行了一些尝试,但我认为这对我没有任何意义。

PS:*** 上的第一篇文章,如果有什么我应该添加/更改的,请告诉我。

提前致谢。

【问题讨论】:

【参考方案1】:

好的,我的请求现在解决了。

The CodeMap extension,基本上就是我要找的扩展。

我在https://github.com/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers 上按照他们的指南进行操作

我创建了一个自定义的专用映射器“mapper_X.js”,将其保存到任意位置,并在我的 vscode 用户设置中粘贴了"codemap.X": "mylocation\\mapper_X.js",(如 github 指南中所述)。然后我打开一个新文件,将其保存为 untitled.X 并输入一些语法(我的问题中的示例代码),现在我可以看到我的自定义大纲。

从下面的结果链接中可以看出,我(故意)没有定义我的映射器来考虑任何其他情况。我的映射器仍处于起步阶段。只是想在我忘记我发布这个问题之前分享我的发现......

【讨论】:

不再需要第三方扩展来执行此操作,而是可以提供DocumentSymbolProvider。【参考方案2】:

在最新版本的 VS Code 中,有一个 API 用于填充大纲视图,而无需依赖第三方扩展(您需要自己编写的除外)。

这可以通过注册DocumentSymbolProvider 来实现。

export function activate(context: vscode.ExtensionContext) 
    context.subscriptions.push(
        vscode.languages.registerDocumentSymbolProvider(
            scheme: "file", language: "swmf-config", 
            new SwmfConfigDocumentSymbolProvider())
    );

这允许在大纲视图中使用扁平结构树结构(两者不能混合)。

class SwmfConfigDocumentSymbolProvider implements vscode.DocumentSymbolProvider 
    public provideDocumentSymbols(
        document: vscode.TextDocument,
        token: vscode.CancellationToken): Promise<vscode.DocumentSymbol[]> 
        return new Promise((resolve, reject) => 
            let symbols: vscode.DocumentSymbol[] = [];
            for (var i = 0; i < document.lineCount; i++) 
                var line = document.lineAt(i);
                if (line.text.startsWith("#")) 
                    let symbol = new vscode.DocumentSymbol(
                        line.text, 'Component',
                        vscode.SymbolKind.Function,
                        line.range, line.range)
                    symbols.push(symbol)
                
            
            resolve(symbols);
        );
    

有关在大纲视图中提供树结构的小型、完整工作示例,请参阅https://github.com/svaberg/SWMF-grammar

【讨论】:

非常感谢推荐swmf扩展,给了很好的例子!!!

以上是关于如何在 vscode 中实现自己的代码大纲布局?的主要内容,如果未能解决你的问题,请参考以下文章

使用自适应布局和情节提要在 XCode6 中实现 ScrollView

如何实现在动态布局中添加更多视图在android中实现滚动视图

如何在布局页面中实现通用的jquery数据表

在 Android 中实现自定义 ListView

如何在android中实现自定义可折叠工具栏?

如何在 React Redux 中实现自包含组件?