Folding sections
Often there will be verbose sections of code that clutter the editor. VS Code has a feature called "Code Folding" that lets you hide sections of code to keep your editor tidy.

Folding HTML

In the "index.html" file, there is an svg tag towards the bottom that is....quite verbose. It takes up most of the window. Use VS Code's folding feature to fold the svg lines.
    Put your cursor anywhere on the line with the starting svg tag
    Open the Command Palette (Cmd/Ctrl + Shift + P)
    Select "Fold"

Folding Code

Code can also be folded. VS Code recognizes methods, classes and other structures. It will allow you to collapse at those levels.
Open the "app.js" file and fold the "constructor"
    Put your cursor anywhere on the line that says "constructor"
    Open the Command Palette (Cmd/Ctrl + Shift + P)
    Select "Fold"

Folding By Region

VS Code allows you to specify arbitrary blocks that should be folded. These are called "regions". To create one of these, use a comment with \\#region at the start of the block and \\#endregion at the end.
Create a region called "Methods" that contains everything in the App class that isn't the constructor.
    On the line above the async init() method declaration add a comment with \\#region Methods
    On the line just above the last closing brace, add a new line
    Enter \\#endregion
    Put your cursor back on the line where you declared the region
    Open the Command Palette (Cmd/Ctrl + Shift + P)
    Select "Fold"
Note that you can also fold by region in HTML
Note that you can comment out any line by putting your cursor anywhere on the line and pressing Cmd/Ctrl + /. This does not work on empty lines.
Last modified 2yr ago