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
  • 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