如何在 vscode 中实现我自己的代码大纲布局? [英] How can I implement my own code outline layout in vscode?

问题描述

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

I'm looking for an extension in Visual Studio Code (vscode) where I can define my custom code outline. Essentially, listing all my functions/definitions in a tree-like manner.

假设我使用的是一种如下所示的简单语言:

Let's say I'm using a simple language that looks as follows:

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 的扩展可以让我实现这样的东西:

I would like to know if there is an extension for vscode that let's me implement something like this:

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

Would be nice if it was clickable. To navigate/go to definition, and possible expandable in case of more complex code.

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

What I've found so far.

1. vscode 代码大纲https://github.com/patrys/vscode-code-outline，我喜欢这个扩展，但它不适用于我的语言..js 文件的示例图像

1. vscode code outline https://github.com/patrys/vscode-code-outline , I like this extension except it doesn't work for my language. Example image for a .js file

显示功能https://marketplace.visualstudio.com/items?itemName=qrti.funclist

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

Sourcecookifier for notepad++ (Can do what I want but for notepad++ obviously)

我喜欢第二个扩展(Show Functions)，因为它可以在 vscode/settings 文件中轻松定制.您可以从设置中定义自己的正则表达式.但是，它不在编辑器固定的大纲视图中.直播也不是很爽.

I like the second extension (Show Functions) as it is easily customizable in the vscode/settings file. You can define your own regular expression from settings. However, it is not in a outline view fixed to the editor. Nor is it refreshing live.

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

I like the first extension too as it is in a tree view but I don't seem to know how and where to modify the settings in order to achieve my layout described.

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

If anyone could point me in right directions it would be very appreciated. I already tried a bit with the documentation of code outline extension but I don't think it is making any sense to me.

PS:StackOverflow 上的第一篇文章，如果有什么我应该添加/更改的内容，请告诉我.

PS: First post on StackOverflow please let me know if there's something I should add/change.

提前致谢.

推荐答案

好的，我的要求现在已经解决了.

Okay, my request is now solved.

CodeMap 扩展，基本上就是我正在寻找的扩展

The CodeMap extension, is basically the extension I'm looking for.

我在 https://github.com 上遵循了他们的指南/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers

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

I created a custom dedicated mapper "mapper_X.js" saved it to an arbitrary location, and in my vscode user-settings I pasted "codemap.X": "mylocation\\mapper_X.js", (as described in the github guide). I then opened up a new file, saved it as untitled.X and typed some syntax (the example code in my question), now I could see my custom outline.

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

As could be seen in the result-link below I have (deliberately) not defined my mapper to consider any other cases yet. My mapper is still in its infancy state. Just thought I'd share my findings before I forget I posted this question...

这篇关于如何在 vscode 中实现我自己的代码大纲布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！