Separators

What's new in Separators 2.9

• Adds Property support
• Adds Getter and Setters properties support
• Adds Folding Ranges support
• Adds Getting Started / Walkthrough
• Published to Open VSX
• Adds new option to draw separators above comments
• Adds new setting to define the minimum number of lines for symbols

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 or specific folding ranges.

Here are some of the features that Separators provides:

• Customize the separators appearance
• Each kind of symbol or folding range can have its own customization
• Select which symbols or folding ranges 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.

Folding Ranges

The extension only draws separators for specific (special) folding ranges, like Comments, Imports and Regions. Just like in Symbols, the only requirement is that the language itself does support these folding ranges.

Features

Available commands

• Separators: Toggle Visibility
• Separators: Select Symbols
• Separators: Select Folding Ranges

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",
        "Properties"
    ],

    // 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

• Controls whether only Getter and Setter kind of Properties should have separators drawn (default is true)

    // globally (user/workspace setting)
    "separators.properties.onlyGetterAndSetter": false

    // per-language setting
    "[javascript]": {
        "separators.properties.onlyGetterAndSetter": false
    }

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
    }

• Specifies the minimum number of lines that a symbol must have to draw separators (default is 0 - unlimited)

    "separators.minimumLineCount": 2

    // per-language setting
    "[javascript]": {
        "separators.minimumLineCount": 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,
    "separators.properties.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",
    "separators.properties.borderStyle": "solid",

• Indicates the locations (relative to the symbols) where the separators will be drawn _(default aboveTheSymbol)

Option	Behavior
aboveTheSymbol	A single separator located above the symbol
aboveTheComment	A single separator located above the comment of the symbol
belowTheSymbol	A single separator located below the symbol
surroundingTheSymbol	A pair of separators located above and below the symbol

   "separators.location": "aboveTheSymbol"

• Indicates the comment rules to draw separators above comments

Out of the box, the extension supports three patterns of comments:

• Slash based comments: Like those found in JavaScript, TypeScript, C, C++, C#, Java, etc

   // this is a single line comment
   
   /* this is a multi line comment 
      this is a multi line comment */

• Pascal based comments: Like those found in Pascal, Object Pascal, etc

   // this is a single line comment
      
   { this is a multi line comment 
      this is a multi line comment }

   (* this is an old school multi line comment 
      this is an old school multi line comment *)

• Lua based comments: Like those found in Lua

   -- this is a single line comment
   
   --[[ this is a multi line comment 
        this is a multi line comment ]]

If you want to add support for a custom language, you can add a new rule to the separators.aboveComments.rules setting. Here is an example for Lua:

   "separators.aboveComments.rules": [
        {
            "name": "Lua",
            "languageIds": [
                "lua"
            ],
            "rules": {
                "singleLine": "^\\s*--",
                "multiLine": [
                    {
                        "start": "^\\s*\\-\\-\\[\\[",
                        "end": "\\]\\]\\s*$"
                    }
                ]
            }
        }
    ],

Or you can open a PR, an contribute to the built in rules in the extension. These are located in the ./rules.json file

Be aware that regex must be escaped, so \\ is used instead of \

• List of folding ranges in which the separators will be drawn

    // globally (user/workspace setting)
    "separators.enabledFoldingRanges": [ 
        "Comments", 
        "Imports",
        "Regions"
    ],

    // per-language setting
    "[csharp]": {
        "separators.enabledFoldingRanges": [
            "Regions"
        ],
    }

• Defines the border width (in px)

    "separators.foldingRanges.comments.borderWidth": 1,
    "separators.foldingRanges.imports.borderWidth": 1,
    "separators.foldingRanges.regions.borderWidth": 1

• Define how border style (choose between solid, dotted, dashed or double)

    "separators.foldingRanges.comments.borderStyle": "solid",
    "separators.foldingRanges.imports.borderStyle": "solid",
    "separators.foldingRanges.regions.borderStyle": "solid",

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",
      "separators.foldingRanges.comments.borderColor": "#65EAB9",
      "separators.foldingRanges.imports.borderColor": "#65EAB9",
      "separators.foldingRanges.regions.borderColor": "#65EAB9",
    }

License

GPL-3.0 © Alessandro Fragnani