How to get an outline view in sublime texteditor?

Question

How do I get an outline view in sublime text editor for Windows?

The minimap is helpful but I miss a traditional outline (a klickable list of all the functions in my code in the order they appear for quick navigation and orientation)

Maybe there is a plugin, addon or similar? It would also be nice if you can shortly name which steps are neccesary to make it work.

There is a duplicate of this question on the sublime text forums.

Answer 1

Hit CTRL+R, or CMD+R for Mac, for the function list. This works in Sublime Text 1.3 or above.

Answer 2

I use the fold all action. It will minimize everything to the declaration, I can see all the methods/functions, and then expand the one I'm interested in.

Answer 3

A plugin named Outline is available in package control, try it! https://packagecontrol.io/packages/Outline

Note: it does not work in multi rows/columns mode. For multiple rows/columns work use this fork: https://github.com/vlad-wonderkidstudio/SublimeOutline

Answer 4

I briefly look at SublimeText 3 api and view.find_by_selector(selector) seems to be able to return a list of regions.

So I guess that a plugin that would display the outline/structure of your file is possible.

A plugin that would display something like this:

Note: the function name display plugin could be used as an inspiration to extract the class/methods names or ClassHierarchy to extract the outline structure

Answer 5

If you want to be able to printout or save the outline the ctr / command + r is not very useful. One can do a simple find all on the following grep ^[^\n]*function[^{]+{ or some variant of it to suit the language and situation you are working in.

Once you do the find all you can copy and paste the result to a new document and depending on the number of functions should not take long to tidy up.

The answer is far from perfect, particularly for cases when the comments have the word function (or it's equivalent) in them, but I do think it's a helpful answer.

With a very quick edit this is the result I got on what I'm working on now.

    PathMaker.prototype.start = PathMaker.prototype.initiate = function(point){};
    PathMaker.prototype.path = function(thePath){};
    PathMaker.prototype.add = function(point){};
    PathMaker.prototype.addPath = function(path){};
    PathMaker.prototype.go = function(distance, angle){};
    PathMaker.prototype.goE = function(distance, angle){};
    PathMaker.prototype.turn = function(angle, distance){};
    PathMaker.prototype.continue = function(distance, a){};
    PathMaker.prototype.curve = function(angle, radiusX, radiusY){};
    PathMaker.prototype.up = PathMaker.prototype.north = function(distance){};
    PathMaker.prototype.down = PathMaker.prototype.south = function(distance){};
    PathMaker.prototype.east = function(distance){};
    PathMaker.prototype.west = function(distance){};
    PathMaker.prototype.getAngle = function(point){};
    PathMaker.prototype.toBezierPoints = function(PathMakerPoints, toSource){};
    PathMaker.prototype.extremities = function(points){};
    PathMaker.prototype.bounds = function(path){};
    PathMaker.prototype.tangent = function(t, points){};
    PathMaker.prototype.roundErrors = function(n, acurracy){};
    PathMaker.prototype.bezierTangent = function(path, t){};
    PathMaker.prototype.splitBezier = function(points, t){};
    PathMaker.prototype.arc = function(start, end){};
    PathMaker.prototype.getKappa = function(angle, start){};
    PathMaker.prototype.circle = function(radius, start, end, x, y, reverse){};
    PathMaker.prototype.ellipse = function(radiusX, radiusY, start, end, x, y , reverse/*, anchorPoint, reverse*/ ){};
    PathMaker.prototype.rotateArc = function(path /*array*/ , angle){};
    PathMaker.prototype.rotatePoint = function(point, origin, r){};
    PathMaker.prototype.roundErrors = function(n, acurracy){};
    PathMaker.prototype.rotate = function(path /*object or array*/ , R){};
    PathMaker.prototype.moveTo = function(path /*object or array*/ , x, y){};
    PathMaker.prototype.scale = function(path, x, y /* number X scale i.e. 1.2 for 120% */ ){};
    PathMaker.prototype.reverse = function(path){};
    PathMaker.prototype.pathItemPath = function(pathItem, toSource){};
    PathMaker.prototype.merge = function(path){};
    PathMaker.prototype.draw = function(item, properties){};