Code Monkey home page Code Monkey logo

codemap.vscode's Introduction

CodeMap - VSCode Extension

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


paypal

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:

The extension functionality is straight forward. 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
    • Python
    • Java
    • Erlang
    • Markdown
    • PowerShell
    • R
    • JSON
    • XML/SVG/XAML
  • Customization by adding support for new syntaxes via:
    • set of Regex expressions in user settings
    • 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 a and VSCode command.

The plugin comes with support for TypeScript, Python and Markdown syntax. C# support will come very soon.

codemap_vscode.gif

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

image

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 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 into 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 the navigation to the most important points in your code. Thus the default mappers deliberately avoid high resolution code parsing (e.g. local variables).

  • Currently VSCode has a defect associate with the expandable nodes selection:
    microsoft/vscode#34130
    patrys/vscode-code-outline#24

    This defect makes it impossible to select a node (and consequently trigger the navigation) without toggling node's expanded state. While being cosmetic this defect can become quite annoying and affecting the overall User Experience.

    CodeMap offers a work around. You can enable the plugin textMode in the user setting:

    "codemap.textMode": true
    

    In this mode the all nodes are made non-expandable and nesting is expressed via node text indent.

    textMode disabled
    tree_mode.png

    textMode enabled
    text_mode.png

codemap.vscode's People

Contributors

alencargabriel avatar andreabenini avatar gongxiao avatar kmint21 avatar kyleking avatar lbs-contributor avatar oleg-shilo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.