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