Skip to content

Structure View for ATOM editor, just like Outline view in Eclipse or Structure tool window in IDEA / WebStorm, provides quick navigation for symbols of source code with a tree view.

License

Notifications You must be signed in to change notification settings

alibaba/structure-view

Repository files navigation

Structure-View

Structure View for ATOM editor, just like Outline view in Eclipse or Structure tool window in IDEA / WebStorm, provides quick navigation for symbols of source code with a tree view.

demo

Pull requests are welcomed! Raise an issue here if you have any question.

Table of Contents

Installation

Two ways to install:

  • From command line:
apm install structure-view
  • From Atom editor:

    Settings/Preferences ➔ Packages ➔ Search for structure-view

Language Support

Lanuage File Extensions AST Parser
HTML .html , .njk , .xtpl , ... htmlparser2
CSS .css css
Javascript .js esprima / jsctags
Others .coffe , .less , .scss , .sass , .yaml , .yml , .md , .markdown , .mdown , .mkd , .mkdown , .ron , .json , .cson , .gyp , .c , .cpp , .mm , .py, .rb , .php , .module , .go , .pl , .pod , .es6 , .jsx , .es , .hx , .nim , .rs , .lc , .livecodescript , .irev , .sql , .bdy , .spc , .pls , plb , .ddl , .pks , .pkb , .sce , .sci , .m , .kla , .ini ctags

Usage

Commands

You can find all these commands by Command Palette.

  • Structure View: Hide
  • Structure View: Show
  • Structure View: Toggle

Shortcut

  • Ctrl-o : Structure View: Toggle

Operations

  • Single click: navigation of tag
  • Double click: collapse/expand the tree of selected tag

Settings

Feature Description Default
Show Variables If you don't need variables in the structure of file, just uncheck this config. true
Show Properties If you don't need properties in the structure of file (such as CSS), just uncheck this config. true
Double Click To Fold Tree View If this value is false, then select tag and toggle the tree view would all by single click. true
Autoscroll from Source (Beta) Enable this feature to have Atom automatically move the focus in the Structure View to the node that corresponds to the code where the cursor is currently positioned in the editor. false

Icon alphabet meaning

HTML
  • <> : Element
CSS
  • S : Selector
  • P : Property
Javascript
  • C : Class
  • I : Import
  • F : Function
  • M : Method
  • V : Variable

Others

  • U : Unknown

TODO

See TODO.md.

Contributing

License

MIT

About

Structure View for ATOM editor, just like Outline view in Eclipse or Structure tool window in IDEA / WebStorm, provides quick navigation for symbols of source code with a tree view.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published