Search code examples
visual-studio-codevscode-extensions

How can I implement my own code outline layout in 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

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

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

  2. Show Functions https://marketplace.visualstudio.com/items?itemName=qrti.funclist

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

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: First post on StackOverflow please let me know if there's something I should add/change.

Thanks in advance.

Solution

  • Okay, my request is now solved.

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

    I followed their guide on https://github.com/oleg-shilo/codemap.vscode/wiki/Adding-custom-mappers

    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...

    result