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 updated