oleg-shilo / codemap.vscode

Code map (syntax tree) of the active document

CodeMap - VSCode Extension

Interactive code map for quick visualization and navigation within code DOM objects (e.g. classes, members).

---

Overview

This simple extension visualizes the code DOM objects defined in the active document. This extension is a for of the popular plugin that is available for:

• Sublime Text 3 - Sublime CodeMap plugin
• Notepad++ - Part of CS-Script.Npp plugin
• Visual Studio - CodeMap (ex-PyMap)

The extension functionality is straightforward. Just click the code map item and it will trigger the navigation to the document where the corresponding code element is defined in the document.

Features:

• Supported syntaxes:
  • C#
  • TypeScript
  • JavaScript
  • React (TSX/JSX)
  • Python
  • Java
  • Erlang
  • Markdown
  • PowerShell
  • R
  • GO
  • JSON
  • XML
  • SVG
  • XAML
  • TCL
  • VB.NET
  • PDL2 (Comau Robot Language)
• Customization by adding support for new syntaxes via:
  • A generic mapper that is a set of Regex expressions in user settings
  • A dedicated simple mapper JS script file.
• Auto-refreshing code map on document change.
• Navigation to code fragment associated with the clicked code map node.
• Refreshing on demand via "Refresh" toolbar button and VSCode command.

Note, the latest releases of CodeMap place the plugin view in its own activitrybar:

Adding custom mappers

The most intriguing feature is the possibility to extend the plugin to support new and even more exotic syntaxes. Read more about the technique in this Wiki page.

If you create mapping rules or a dedicated mapper and want to share it with others. Create a pull request or just log the corresponding issue on this project and I will consider including your mapper in the plugin package.

Limitations

• The main objective of this plugin is not to provide the most accurate CodeDOM (syntax tree) presentation but rather to assist with navigating to the most important points in your code. Thus the default mappers deliberately avoid high-resolution code parsing (e.g. local variables).

codemap.vscode's Issues

Alpha Sorting for custom generic mapper

I have set up a custom mapper for MapBasic (syntax similar to VBScript) as follows:

"codemap.mb": [
    {
        "pattern": "^([Ff]unction|[Ss]ub) .*",
        "clear": "[Ff]unction |[Ss]ub ",
        "suffix": "",
        "icon": "function"
    }
],
"codemap.sortingEnabled": true,

It is correctly listing my Functions and Subs, but they are sorted by position and not by name. I have enabled Codemap: Sorting Enabled in the settings, as reflected in the above snippet from settings.json.

Do I need to do something else to enable alphabetical sorting?

Thanks!

regular expression with [

Hi

I'm trying to outline my proprietary file format similar to the INI format. The bracket [ in my regular expression doesn't seem to be recognized. What am I doing wrong?
Expression: "pattern": "[[a-zA-Z0-9_=]+] \w*",

Feature request: hide the indent from script

That would be great if there was a settings that would allow the user who create a custom mapper to choose if he/she wants the code map to reflect the indent in the file.

Ex: In a script that is indented (ex python, json...), I would like a "title" that has 1 or more indents to be set as level 1 in my code map and thus to not have any indent.

In this image, title 2,3,4 (which are indented in my code) should be at the same level as Title 1

Another was of doing it is to let the user have full control over the "prefix" (which is somewhat linked to my request #13 )

(Sorry for opening all those issues/features request at once)

Expand All / Collapse All

Issue Type: Feature Request

I'd appreciate a Expand All / Collapse All button.

pattern with newline

Is there a possibility to identify functions including newline?

In AHK it is possible a function exists like this:
func01()
{
code
}

The following should not match:
if (matching){
func01()
}

My pattern today is:
"pattern": "^ (\w)[(].?[)]\s{"

Minimize Code Map - Keyboard Shortcut?

Thanks for bringing this functionality to VS Code! I came from Sublime and loved sublime-codemap

Would it be possible to have a shortcut or option to collapse or minimize the code map view?

I mapped ctrl shift e chord f to Focus File View and ctrl shift e chord c to Focus Code Map. But when Code Map is open, it obscures the File Explorer. Would it be possible to collapse the code map without using a mouse through a command pallette option that could be mapped to a keyboard shortcut?

Codemap generic mapper does not work with UTF-16 encoded files

Hello

I just installed CodeMapper in VSCode 1.44.2 for Windows.

The extension seems to be working fine for supported languages, eg C#. But for some reason I am unable to configure the generic mapper to support a custom language.

I have tried following the example from the Wiki, and copied the example "codemap.x" configuration, renaming it "codemap.ws" as I wish to support files with a .ws extension. However my newly added variable "codemap.ws" is shown in settings.json to be invalid, and Codemap shows nothing when I test it on a sample file. I then tried copying the example in exactly, using "codemap.x", and it shows the same thing.

Here's a screenshot demonstrating my attempt to use both "codemap.ws" and "codemap.x" :

As you can see, both show as greyed out, and neither work on sample files with .ws or .x extensions.

I noticed on the Codemap extension configuration page that it has specific entries for Md, Ps1, Py and R , and if I try adding a settings.json value such as "codemap.md" or "codemap.ps1", these show as valid.

Apologies if I've done something wrong, or misunderstood something, or misread the Wiki. I am very new to VSCode.

Thanks in advance, and for creating Codemap, which looks to be exactly what I want - a way to get an outline view for a niche file extension.

PS. A separate issue, much less important - the Wiki and description talks of "Refreshing on demand via Refresh toolbar button"; I do not have any button in my Codemap bar except "Collapse All" :

Codemap doesn't display async function

In my Typescript project I have some async function but these don't appear in the codemap window.

async function loadInfo() {....}

Wait support C#

Explorer implementation doesn't work

Hi, I was testing the new configuration to change the location of the View CodeMap (#27), when I realized that it was not working.

Configuration

"codemap.prw": "C:\\Users\\g_santana\\AppData\\Roaming\\Code\\User\\mapper_prw.js",
"codemap.prx": "C:\\Users\\g_santana\\AppData\\Roaming\\Code\\User\\mapper_prw.js",
"codemap.textModeExpanded": false,
"codemap.textMode": false,
"codemap.location": "codemap",

Benefit over existing code outline extensions?

I was just asking myself, what benefits have your implementation over the already existing ones like?

https://github.com/patrys/vscode-code-outline

strange indent tree

I want to list all javscript functions inside of a html source file, but the results contain strange indents, making it more difficult to read the tree.

    "codemap.html": [
        {
          "pattern": "^(\\s*)function.*"
          ,"clear": "function"
          ,"prefix": ""
          ,"icon": ""
        }
      ],

Are there plans to support java DOM?

Are there plans to support Java language DOM?
FYI. Thanks.

Ability to specify codemap for files without extensions

I'm using the generic mapper function to provide codemap for some code and it works well.

However, some of the files have no file extensions - is there any ability to still use codemap to for these files?

codemap.quick_pick not found

Using the quick pick command causes an error, unless the extension has been activated before in the same session by opening the sidebar view. (For myself, the sidebar feels completely redundant, to be honest.)

Support newline in regex

I'm trying to denote code sections like this which requires detecting the section with the top line and naming it with the bottom one

# ==============================================================================
# Authentication

[suggest] add a "search select words in code map" to right click menu

and "search select words in all code map of current project"

What about PHP?

Show/Hide level in code map

Issue Type: Feature Request

It would be nice if we could filter the level displayed in the code map and only show level 1 or only level 1 and 2.

Simplify mapping rules for Python

I think the default mapping for Python can be improved (no need to show "class" or "def")

Maybe something like:
(although I can't seem to be able to get rid of the first bracket after the class/function name)

   "codemap.py": [
      {
         "pattern": "(?<![^\\r\\n\\t\\f\\v .])class (.*?)[(|:]",
         "clear": "class|:|(",
         "prefix": "",
         "role": "class",
         "icon": "class"
      },
      {
         "pattern": "def (.*?)[(|:]",
         "clear": "def|:|(",
         "suffix": "",
         "role": "function",
         "icon": "function"
      }
   ],

Generic Mapper: a pipe char in the source interferes with the complete mapping

Hi,

first of all, this is indeed a very, very useful extension. Thanks a lot for publication:-)

After setting up the first generic map (which generally works out nicely) I realized that the "|"-symbol somehow generates incomplete results.

source code: function getExpKey($iniFile, $sep="|", $key) {

regex definition: "pattern": "(?<=^function )\\w*\\(.*\\)(?=\\s*\\{)",

result (in tree view): getExpKey($iniFile, $sep=" (additionally, the tree view entry has no icon and is not navigateable)

From a very brief look at the code I guess it's caused by internal usage of the "|" as a seperator in the mapping logic, like in

mapper_generic.ts, line 129: map = map + extra_line + prefix + lean_content + '|' + String(line) + '|' + icon + '\n';

I may find a regex skipping the "|" (I fear it's getting to complicated ...), but it would be much better if the sources can contain any kind of char. ;-)

edits: typos

Customizing the color of the squares in "Codemap explorer"

With the theme and color I use, I can't see the squares in "Codemap explorer" that indicates the level of the headings [cf "editor" on the printscreen below] .
I can only see them when I am on the heading [cf "keep file open" ] or when I mouse over the heading on codemap explore [cf "color" - sorry my printscreen didn't keep the mouse cursor] .
It would be nice to be able to customize the color of these square.

And if it's not too much to ask, it would be awesome to have a different customizable color per level.

Thanks!

Multi-line Regexp

Hi, I'm trying to to add a custom mapper for a very old scripting language (LScript). It doesn't have a any sort of function keyword. A function is always at the topmost/global scope, and is defined if it precedes { and }.

So I wrote a simple regexp:

"^[A-z].*(?=\\n{)"

But this one doesn't work -- no result in CodeMap.

So I tried removing the newline lookahead:

"^[A-z].*"

And this one 'worked', but not my intended result. It seems like CodeMap is not able to use Regexp to process multiple lines? Is this possible to do?

This is an example of LScript code:

some_global_var=1;
some_global_string="Hello world.";
my_function
{
  info(some_global_var);
  call_other_function(some_global_string+some_global_var);
}
my_function: input
{
  info(input);
}
main // entry point
{
  my_function();
}

Set Indentation with generic mapper

Can you set indentation with the generic mapper? If so, how?

I don't get the tree with the triangles

Hello,
For some reason I don't get the small triangles on the right, to collapse or expand.
How should I set the extension?
Thanks!

Sorting

It would be great, if the output could be sorted alphabetically, respecting namespaces, classes, ... Could it be a solution, to implement an alternative data structure being returned from the mapper? This way old code would keep on working flawlessly, but a new mapper could return more information about the structure of the code than it is possible righ now?

Opened with reference to #42.

Custom mapper doesn´t work

I want to create a custom mapper for assembly language (primary goal) so I follow your example in the wiki to create a generic wrapper for a file extension (I try it with your markdown example first).
My file main.x looks like this

# Test
### Test3

I have a mapper_X.js on my desktop (complete path C:\Users\Daniel\Desktop\mapper_X.js)
"codemap.md": [ { "pattern": "^(\\s*)### (.*)", "clear": "##", "prefix": " -", "icon": "level3" }, { "pattern": "^(\\s*)## (.*)", "clear": "##", "prefix": " ", "icon": "level2" }, { "pattern": "^(\\s*)# (.*)", "clear": "#", "prefix": "", "icon": "level1" }, { "pattern": "!\\[image\\]", "clear": "![image]", "prefix": "<image>", "icon": "none" } ]
VS code marks the ":" in '"codemap.md": [' red and say ";" expected. Why?

I also add "codemap.X": "C:\\Users\\Daniel\\Desktop\\mapper_X.js", to my settings.json. VS code marks codemap.X green and say Unknown configuration setting.

And I don´t get any result in my Code Map window with the above example.

What goes wrong here?

Thank you!

How to register a custom mapper with a complex file extension

We made a custom JS mapper for CSDL XML files (OData CSDL XML is defined at http://docs.oasis-open.org/odata/odata-csdl-xml/v4.01/cs01/odata-csdl-xml-v4.01-cs01.html).

However in the VSCode JSON Settings we have to register it under the "codemap.xml" key, whereas we would rather register it under a key "codemap.csdl.xml" and have it apply only to XML files ending with the file extension ".csdl.xml".

Just wondering how to achieve it.

Here is the JS code.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");

class mapper {

    static read_all_lines(file) {
        let text = fs.readFileSync(file, 'utf8');
        return text.split(/\r?\n/g);
    }

    static generate(file) {
        let members = [];
        try {
            let line_num = 0; 
            let image_index = 1;
            mapper
                .read_all_lines(file)
                .forEach(line => {
                    line_num++;
                    line = line.trimStart();
                    let firstIndex = line.indexOf('"');
                    let secondIndex = line.substr(firstIndex+1).indexOf('"');
                    if (line.startsWith("<Schema"))
                        members.push(`${line.substr(1, firstIndex+secondIndex+1)}|${line_num}|level1`);
                    else if (line.startsWith("<EntityType") || line.startsWith("<ComplexType") 
                        || line.startsWith("<EnumType") || line.startsWith("<TypeDefinition") 
                        || line.startsWith("<Term") || line.startsWith("<Action") 
                        || line.startsWith("<Function") || line.startsWith("<EntityContainer"))
                        members.push(`    ${line.substr(1, firstIndex+secondIndex+1)}|${line_num}|level2`);

            });
        }
        catch (error) {
        }
        return members;
    }
}
exports.mapper = mapper;

Publish to Open VSX Registry

Thank you for this extension! It was easy to make a custom regex mapper for navigating files with lots of markdown-formatted comments.

Unfortunately, I had to download and install it manually because it is only published on Microsoft's proprietary Marketplace. The problem is that non-Microsoft builds of vscode are not allowed to use Marketplace per its terms of use. See: microsoft/vscode#31168

I personally use Arch Linux's code package, but there are more popular projects like vscodium, theia, gitpod, and others. The solution these projects use is the Open VSX Registry, an Eclipse Foundation project to provide a vendor-neutral extension repository for vscode-compatible editors.

There is documentation for publishing an extension available. If you're really opposed to that, it's possible to have openvsx auto-publish if the extension is added to their list. But then that list has to be maintained independently of the extension project and is not ideal, so proper publishing is preferred.

Thanks for supporting FLOSS!

Add to Activity Bar

Issue Type: Feature Request

Hate is a strong word, but I think I hate with a passion how cluttered the Explorer is.
Would it be possible to add Codemap to the Activity Bar?

Custom mapper (custom extension) reports "Unknown Configuration Setting"

Hi, I am using a custom mapper for the extension ".ls". This mapper used to work before but when I opened up an .ls file today, I found that the config was greyed out like this ("Unknown Configuration Settings"):

I'm on VS Code 1.53.2, and I wondering if this is related to a recent update.

Thank you for reading!

Tree in alphabetical order

Hello,

Is it possible to make a function list with alphabetical order?
I am using this nice plugin for a special programing language where
would be easier to search in this alphabetical order rather than presence.

If you have any idea for it please let me know.
Regards,

Joe

codemap.r

I use the follow patterns to split my code.

# ============================================================================ #
# ~~~~~~~~~~~~~~~~~~~~~~~~~~SOME RANDOM WORDS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~#
# ============================================================================ #

OBS: ~ it was to be a space

then in the settings.json I set the code maps as follows:

"codemap.r": [
       {
           "pattern": "^#[A-z\\s-_!?]*#$",
           "clear": "#",
           "prefix": "",
           "icon": "level2"
       }
   ]

It used to works, but recently stop to work. Any idea why?

Switching back to explorer view from activity bar

Would love to be able to use this in the explorer view (so as to replace the functionality of vscode's builtin outline view) instead of the activity bar view. Is it possible to switch this using a configuration option?

Cannot create json setting for dedicated mapper

Thank you for an excellent extension.

I am trying to extend the mapper for markdown files. When I add the required setting in the VS Code settings json file for the new dedicated mapper as follows:

"codemap.md": "D:\\Dropbox_local\\software\\V\\Visual Studio Code\\extensions\\mapper_md.js",

I receive the error:

Regex-based definition of the mapping rules for Markup syntax.
Incorrect type. Expected "array".

Any advice would be much appreciated.

Thank you.

Feature proposal - Document Symbol

Hello Oleg, working here I had an interesting idea.

I'd like to know if you accept my proposal for implementation in the extension.

CodeMap replaces VsCode's Outline very well, especially for extensions that don't implement Language Server.

My proposal would be to take advantage of this extension to also implement the Find Symbol feature (Ctrl + R), since users already define the syntax of their languages. So there would be no need to change anything today, just add the functionality.

What do you think?

Show current location of cursor in file

Issue Type: Feature Request

It would be helpful to highlight in the codemap the current location of the cursor in the file.

Unfold also in editor

It would be more practical if it unfolds also classes and functions in editor.
And more like Ctrl+click it opens the whole class/function rite away.

Not working for Javascript file

Code map is not showing the methods in javascript file.

Refresh button is missing

Triggered by #33

Accidentally the Refresh button is always hidden

How to insert spaces at the "prefix"?

Hello,
I want to insert a few spaces at the prefix, something like:

    {
        "pattern": "^(\\s*)#### (.*)----",
        "clear": "#|----",
        "prefix": "\\s\\s",
        "icon": "level3"
    },

But instead of 'space''space', I get '\s\s' before the line.
Thanks!

Private functions in Typescript are not showing in Code Map area.

I see the functions that i label as "public" in the CodeMap area, but whenever I label a function as "private" i do not see it. This seems by design but would be nice to have an option to "showPrivateFunctions" option.

How to specify a codemap .js when using remote ssh

Hi,
Im trying to write a simple codemap .js to parse my custom file.
Im using VSCode remove development.
Im on a Windows machine and im using remote development on a linux box.

In my workspace .json file i cant find the right syntax for the file to be found
Ive tried loads
"codemap.ini": ".vscode/codemap.ini.js",
"codemap.ini": "/.vscode/codemap.ini.js",
"codemap.ini": "\codemap.ini.js",

In the developer tools im always seeing errors of this form.
[Extension Host] Error: Cannot find module '.vscode/codemap.ini.js'

Any suggestions?
Thx
derek

Can CodeMap display in Explorer Activity

HI,
Can the CodeMap explorer have a setting to allow where its displayed.
Some screen shots show it in the Exporer activity.
However now its in its own activity on the activity bar.

A setting to control this would be great.

Thanks
Derek

<Error>No connection could be made because the target machine actively refused it

Hi there.
I get on CODEMAP EXPLORER No connection could be made because the target machine actively refused it: 127.0.0.1:18002

I opened that port on my firewall, but it had no effect

Any idea of what can be going on?

Inclusion of Tcl language

Hi,
I've written a simple mapper fort Tcl/iTcl. Would you mind including it? Unfortunately it is rather simplistic, but better than nothing. Do you see the possibility to easily add a few features, like sorting alphabetically or taking a namespace into account?

An example of a tcl-file would be:

namespace eval ggg {

    itcl::class test {
        variable question
        variable answer

        constructor {text} { 
        }

        destructor {
        }

        method query {command {format 0}} {
        }

        method print {} {
        }

    }

    proc create_item {service port} {
    }
}

proc ggg::ttt {} {
}

Mapper:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fs = require("fs");

class mapper {

    static read_all_lines(file) {
        let text = fs.readFileSync(file, 'utf8');
        return text.split(/\r?\n/g);
    }

    static generate(file) {
        let members = [];
        try {
            let line_num = 0; 

            const re_proc = new RegExp('^(\\s*)proc\\s+(.+?)(?:\\s*{\\s*)$');
            const re_class = new RegExp('^(\\s*)(?:(?:::)?itcl::)?class\\s+([\\w:]+)');
            const re_variable = new RegExp('^(\\s*)(?:(?:public|private|protected)?\\s+)?variable\\s+(\\w+)');
            const re_constructor = new RegExp('^(\\s*)constructor\\s+(.+?)(?:\\s*{\\s*)$');
            const re_destructor = new RegExp('^(\\s*)destructor');
            const re_method = new RegExp('^(\\s*)(?:(?:public|private|protected)?\\s+)?method\\s+(\\w+.+)(?:\\s*{\\s*)$');
            const re_namespace= new RegExp('^(\\s*)(?:namespace\\s+eval)\\s+(\\w+)');

            mapper
                .read_all_lines(file)
                .forEach(line => {
                    line_num++;
                    //line = line.trimStart();
                    // proc
                    if (re_proc.test(line)) {
                        let result = line.match(re_proc);
                        members.push(`${result[1]}${result[2]}|${line_num}|function`);
                    // itcl::class
                    } else if (re_class.test(line)) {
                        let result = line.match(re_class);
                        members.push(`${result[1]}${result[2]}|${line_num}|class`);
                    // variable
                    } else if (re_variable.test(line)) {
                        let result = line.match(re_variable);
                        members.push(`${result[1]}${result[2]}|${line_num}|property`);
                    // method
                    } else if (re_method.test(line)) {
                        let result = line.match(re_method);
                        members.push(`${result[1]}${result[2]}|${line_num}|function`);
                    // constructor
                    } else if (re_constructor.test(line)) {
                        let result = line.match(re_constructor);
                        members.push(`${result[1]}constructor ${result[2]}|${line_num}|function`);
                    // destructor
                    } else if (re_destructor.test(line)) {
                        let result = line.match(re_destructor);
                        members.push(`${result[1]}destructor|${line_num}|function`);
                    // namespace
                    } else if (re_namespace.test(line)) {
                        let result = line.match(re_namespace);
                        members.push(`${result[1]}${result[2]}|${line_num}|document`);
                    }
            });
        }
        catch (error) {
        }
        
        return members
    }
}
exports.mapper = mapper;

Thanks for considering.

Tab indented files show flat tree

Hi, thanks for the great extension!

I'm trying to make a simple custom mapper for my html files:

"codemap.html": [{
    "pattern": "<[a-z][^<>]*(?:(?:[^/]\\s*)|(?:\\s*[^/]))>",
    "icon" : "function"
}]

With my files being indented with tabs i get the folowing results: tree stays flat after the first level.

When i change indentation to spaces the tree structure is correct:

Is there a way to use tabs with proper tree structure?

add search or filter?

it's difficult to find a node in a long list

Custom mapper for multiple file extensions

Can I define a custom mapper that applies to all file extensions? Or even better, be able define the file extension it should apply to with regex?

Allow space in prefix

To get nice indent in my custom code map, I would like to prefix the level 2 and 3 with spaces. But this doesn't work
"prefix": " ",

I also tried this but still it doesn't work:
"prefix": "\s",

I tried to prefix with tab, which works, but the tab create an indent that is too large
"prefix": "\t",

Would it be possible to add spaces as prefix?

And thanks a lot for your great extension and the nice tuto "Adding custom mappers"!

Extension version: 1.8.0