VS Code Can Do That - Workshop
1.0.0
Main1.0.0
1.0.0
Main1.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
  • Turn off the Minimap
  • Move Sidebar Right
  • Hide Open Editors

Was this helpful?

  1. Exercise 1 - Customizing The Editor

Editor tweaks

PreviousSwitch fontsNextChange default Settings view

Last updated 5 years ago

Was this helpful?

You can make some tweaks to the visual components of the editor to increase the available space and improve legibility.

Turn off the Minimap

This is the little navigation bar that sits next to your code.

It's supposed to give you a heads up display so that you can easily navigate through long files. I find the fact that I can't read it makes it unusable. I find that most people feel this same way. I recommend turning this off as there is a high likelihood that you don't use it and it's just taking up space.

Besides, there are other ways (better and faster ways) to find things in your code which we'll discuss later in this workshop.

Turn it off.

  • Open Settings (Cmd/Ctrl + ,)

  • Search for "Minimap"

  • Uncheck the "Editor > Minimap: Enabled" setting

Move Sidebar Right

The Sidebar is on the left by default. Having it on the right makes it easier to keep your eyes on your code when expanding and collapsing it (which you will do a lot).

  • Open the Command Palette (Cmd/Ctrl + Shift + P)

  • Select "Toggle Sidebar Position"

Hide Open Editors

By default, VS Code has a section in the File Explorer called "Open Editors". These are the files that you currently have open.

It's quicker to navigate to files with the File Switcher (Cmd/Ctrl + P). The Open Editors section just takes up valuable space in the File Explorer. Turn it off.

  • Open Settings (Cmd/Ctrl + ,)

  • Search for "open editors visible"

  • Set the "Explorer > Open Editors: Visible" to 0