skip to Main Content

I’d like to fold the code block below by clicking the editor gutter on line 42 where the closing div tag is located. WebStorm has this feature. Is there an extension or a feature providing this in VS Code?

HTML code block

2

Answers


  1. There is a native feature allowing you to fold anywhere in the code block. Just place your cursor anywhere in the code block and in go to Command Palette (open with F1 or Ctrl+P) > "Toggle Fold" or simply press Ctrl+K Ctrl+L if you haven’t modified your keybinds.
    Note that your cursor has to be in the code block and not on the closing tag, otherwise it will fold the parent.

    Login or Signup to reply.
  2. I googled "github vscode code fold button at end of block" and found an issue ticket tracking this request (I.e. this is not supported yet at the time of this writing): [folding] show folding actions at the end of folding range as well #60670. Someone also wrote a PR drafting an implementation of the requested change: Add folding from end of region #77363. You can give both of those a thumbs up reaction to show support for them, and subscribe to them to get notified about discussion and progress. But please don’t write noisy comments there like "+1" / "bump" / "me too".

    As a current workaround, you can put the caret inside the folding range (but not at the ending line) and use the Toggle Fold command in the command palette, or the corresponding keyboard shortcut (the default keyboard shortcut is ctrl/cmd+k, ctrl/cmd+l).

    Note that this ask is not universally applicable I think. For example, in a language like Python where blocks are partially indentation based, you can have multiple blocks with folding ranges starting on different lines, but ending on the same line (at least I think that’s how it works- or something along those lines).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search