VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
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.