Displays a code outline tree in the explorer pane.
To activate find and expand the "Code Outline" section near the bottom of the Explorer tab.
For the outline to work, the language support plugins need to support symbol information.
For the outline to form a tree structure, the language support plugins need to report the entire definition range as part of symbol.
See VS Code issue #34968 and language server protocol issue #132 for a discussion.
Here is a list of languages known to work with Code Outline:
Language/Format | Extension |
---|---|
C | C/C++ |
C++ | C/C++, cquery |
Docker | Docker |
HTML | Comes with VS Code |
JavaScript | Comes with VS Code |
JSON | Comes with VS Code |
Markdown | Comes with VS Code |
Perl | Perl |
PHP | PHP Symbols |
Python | Python |
TypeScript | Comes with VS Code |
YAML | YAML Support by Red Hat |
Please report any missing extensions and I'll update the list.
Default settings:
{
"symbolOutline.doSort": false,
"symbolOutline.doSelect": true,
"symbolOutline.sortOrder": [
"Class",
"Module",
"Constant",
"Interface",
"*",
"Constructor",
"Function",
"Method"
],
"symbolOutline.expandNodes": [
"Module",
"Class",
"Interface",
"Namespace",
"Object",
"Package",
"Struct"
],
"symbolOutline.topLevel": [
"*"
]
}
- doSort: sort the outline.
- doSelect: select the code segment by selecting item.
- expandNodes: kinds of nodes to be expanded automatically.
- sortOrder: order to the sort symbols.
- topLevel: wich symbols include at the topmost scope.
Depending on other extensions you have installed the symbol list may initially return an empty list. Use the "Refresh" button next to the title to fix this.