
What's new in Separators 2.5
- Adds new setting to choose separator's location
- Adds Localization support
- Adds Web support
- Adds separators for
Struct
symbol
- Adds Virtual Workspaces support
Support
Separators is an open source extension created for Visual Studio Code. While being free and open source, if you find it useful, please consider supporting it.
Separators
It improves the readability of your source code, by drawing lines on top of each symbol.

Here are some of the features that Separators provides:
- Customize the separators appearance
- Each kind of symbol can have its own customization
- Select which symbols will have separators
Language Support
The extension will automatically work with any language you have installed in VS Code. The only requirement is that the language itself does support Go to Symbol
.
To be sure your desired language will work on Separators, take a look at Outline
view in VS Code. If it display contents, then Separators will work perfectly.
Features
Available commands
Separators: Toggle Visibility
Separators: Select Symbols
Available settings
You can customize the appearance of each kind of Symbol.
- List of symbols in which the separators will be drawn
// globally (user/workspace setting)
"separators.enabledSymbols": [
"Classes",
"Constructors",
"Enums",
"Functions",
"Interfaces",
"Methods",
"Namespaces",
"Structs"
],
// per-language setting
"[typescript]": {
"separators.enabledSymbols": [
"Enums",
"Interfaces"
],
}
- Controls whether callback/inline Functions should be ignored (default is
false
)
// globally (user/workspace setting)
"separators.functions.ignoreCallbackInline": true
// per-language setting
"[javascript]": {
"separators.functions.ignoreCallbackInline": true
}
For now, only JavaScript, TypeScript and Lua languages are supported. If you would like to see it on other languages, please open an issue providing details/samples
- Indicates the maximum depth (level) which the separators should be rendered (default is
0
)
"separators.maxDepth": 1
// per-language setting
"[javascript]": {
"separators.maxDepth": 2
}
- Defines the border width (in
px
)
"separators.classes.borderWidth": 1,
"separators.constructors.borderWidth": 1,
"separators.enums.borderWidth": 1,
"separators.functions.borderWidth": 1,
"separators.interfaces.borderWidth": 1,
"separators.methods.borderWidth": 1,
"separators.namespaces.borderWidth": 1,
"separators.structs.borderWidth": 1,
- Define how border style (choose between
solid
, dotted
, dashed
or double
)
"separators.classes.borderStyle": "solid",
"separators.constructors.borderStyle": "solid",
"separators.enums.borderStyle": "solid",
"separators.functions.borderStyle": "solid",
"separators.interfaces.borderStyle": "solid",
"separators.methods.borderStyle": "solid",
"separators.namespaces.borderStyle": "solid",
"separators.structs.borderStyle": "solid",
- Indicates the locations (relative to the symbols) where the separators will be drawn _(choose between
aboveTheSymbol
, belowTheSymbol
and surroundingTheSymbol
)
"separators.location": "aboveTheSymbol"
Available colors
For more information about customizing colors in VSCode, see Theme Color.
- Choose the color of the border
"workbench.colorCustomizations": {
"separators.classes.borderColor": "#65EAB9",
"separators.constructors.borderColor": "#65EAB9",
"separators.enums.borderColor": "#65EAB9",
"separators.functions.borderColor": "#65EAB9",
"separators.interfaces.borderColor": "#65EAB9",
"separators.methods.borderColor": "#65EAB9",
"separators.namespaces.borderColor": "#65EAB9",
"separators.structs.borderColor": "#65EAB9",
}
License
GPL-3.0 © Alessandro Fragnani