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.