16

Is it possible to customize the way code folding works in Visual Studio Code?

I use a common pattern of defining regions of code across a variety of different document types.

  • So, for XML I wrap sections of text with <!-- #region --> and <!-- #endregion -->

  • For c#, I use #region to #endregion,

  • For TypeScript/Javascript, I use /* #region */ and /* #endregion */.

In full Visual Studio (not VS Code), I have a custom extension which snoops for the pattern across document types, and creates folds based on that, allowing me to create neat, custom document outlines. I'd like to use the same pattern in Visual Studio Code. Is it possible to create a custom VS Code extension which detects these comment patterns, and somehow tags folds based on the patterns?

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
Stephen Ellis
  • 2,561
  • 2
  • 24
  • 47
  • Note: you might not even need to make an extension anymore. VS Code now supports region comments/pragmas ("markers"): https://code.visualstudio.com/docs/editor/codebasics#_folding – starball Feb 25 '23 at 22:44

4 Answers4

8

FoldingRangeProvider can be used if you are looking to contribute custom folding logic in an extension.

Be sure to set your VS Code version in engines in package.json to 1.23, the version that introduced this.

Here's how you'd use one.

export function activate(context: ExtensionContext) {
    languages.registerFoldingRangeProvider({ scheme: 'file', language: 'markdown' }, new MyFoldingRangeProvider());
}

class MyFoldingRangeProvider implements FoldingRangeProvider {
    provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): FoldingRange[] {
        return detectRanges().map(({ lineStart, lineEnd }) => new FoldingRange(lineStart, lineEnd));
    }
}
Gama11
  • 31,714
  • 9
  • 78
  • 100
Tomáš Hübelbauer
  • 9,179
  • 14
  • 63
  • 125
  • 1
    I wrote an extension that allows you to provide customized and customizable folding regions. See [here](https://marketplace.visualstudio.com/items?itemName=maptz.regionfolder) – Stephen Ellis Aug 16 '22 at 04:31
2

There are three ways to achieve customized folding in a VSCode extension.

  1. You can define regex as folding markers in a [language-name].configuration.json file. (However, we don't have much customization with this approach)

{
  "folding": {
    "markers": {
      "start": "starting regex",
      "end": "ending regex"
    }
  }
}
  1. You can define a FoldingRangeProvider from within the extension as described in this answer. FoldingRange in vscode package supports folding customization with startLine, endLine, and foldingKind.

  2. You can use Language Server support with textDocument/foldingRange. FoldingRange in the vscode-languageserver-protocol supports folding customization with startLine, endLine, startCharacter, endCharacter, and foldingKind.

Check this for more details.

DarkTrick
  • 2,447
  • 1
  • 21
  • 39
  • 3
    Where do I find `[language-name].configuration.json`? – René Nyffenegger Apr 29 '21 at 10:04
  • It is the `configuration` under `contributes.languages` defined in `package.json` of your extension code. { "contributes": { "languages": [ { "id": "language-name", "aliases": [], "extensions": [ ".abc" ], "configuration": "./grammar/language-name.configuration.json" } .... } – prabushi samarakoon May 01 '21 at 06:28
  • That file appears to be part of the extension code. Is it possible for a user to modify it? Where is the file actually found? – swimfar2 Jun 05 '23 at 22:41
2

On August 6th 2022 the feature "Fold Selection" was added to "V.S. Code" as part of the sem-minor v1.70.0 release. This new feature gives users complete control over line folds, by total I mean, when & where. Fold Selection allows you to fold whatever code you want, wherever you want.


Below is a GIF image that was appended to the official v1.70.0 release notes

enter image description here


I copy & pasted this image because..,

A. The image shows how the new feature works, and...
B. because it shows that the feature works much like line folding does in IDEs — i.e. VS-22, Intelli-J, CLion, etc...

V.S. Code is actually the first editor I ever used, and I stuck with it for the last 5 years, but one thing I noticed on day 1 of test driving V.S. Code was that it did not have this feature.



Using the new Fold Selection Feature


You can use the feature via the quick input, just type "Fold Selection" until the option pops up for you to select, however, I perfer customizing a keybinding for it.

Here is the default configuration for fold selection in the default keyboard shortcuts JSON document:

{
  "key": "ctrl+k ctrl+,",
  "command": "editor.createFoldingRangeFromSelection",
  "when": "editorTextFocus && foldingEnabled"
}

How to configure the above snippet is beyond the scope of this post, but I suggest keeping the when statement as it is configured above (which is the default).

You can use the keybinding shown in the JSON snippet w/o any configuration, which would be:

CTRL + K CTRL+,

...however, vscode has to attach most all commands to some keyboard shortcut. Most people cannot remember all of the commands and shortcuts, so for features you use often, it makes since to attach it to more practicle option, I like to use something like

CTRL + SHIFT + SPACE SPACE

Its almost like quickly pressing space twice.

Anyways, this is a far better option than what was available before, cheers!

CLICK HERE TO READ THE OFFICIAL RELEASE NOTES

JΛYDΞV
  • 8,532
  • 3
  • 51
  • 77
1

Unfortunately, not at the moment. There is a an open issue in github for this very topic.

seairth
  • 1,966
  • 15
  • 22
  • This is not true anymore, and the issue has been closed for years. **[@See this answer](https://stackoverflow.com/questions/36825024/when-folding-a-line-in-vs-code-is-it-possible-to-override-the-indentation-and-ch/73265120#73265120)** – JΛYDΞV Oct 06 '22 at 15:17