VS Code Can Do That - Workshop
1.0.0
1.0.0
  • Introduction
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Before you start
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Before you start
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Before you start
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Before you start
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Untitled
Powered by GitBook
On this page
  • Folding HTML
  • Folding Code
  • Folding By Region

Was this helpful?

  1. Exercise 3 - Navigation And Refactoring

Folding sections

PreviousMoving, Duplicating and DeletingNextMultiple cursors

Last updated 5 years ago

Was this helpful?

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.