Mike Slinn
Mike Slinn

Microsoft Visual Studio Code Notes

Published 2021-03-22. Last modified 2023-12-30.
Time to read: 4 minutes.

This page is part of the posts collection, categorized under Python, Ruby, Visual Studio Code.

Launching VSCode

Opening A File

To open a file, simply provide the file name on the command line. For example, to open abd/xyz/my_func.c, type:

Shell
$ code abd/xyz/my_func.c

If VSCode has at least one window open, the top-most window will open a new tab containing the desired file. Otherwise, VSCode will launch, with the desired file displayed in an editor pane.

This works with relative and absolute file names.

You can type the incantation into any command console, such as CMD, PowerShell or bash. You can also use the console built into VSCode, which can be toggled with CTRL-~, or you can use an external console such as Microsoft Terminal.

Opening A File At a Line

To open a file at a given line number, use the -g option on the command line, and follow the file name with a colon and the line number. For example, to open abd/xyz/my_func.c at line 123, type:

Shell
$ code -g abd/xyz/my_func.c:123

Useful Default Key Bindings

CTRL+~
Toggle visibility of the current Terminal pane in the lower panel.
CTRL+B
Toggle visibility of the Explorer view, which contains the files and directories for the VSCode project.
CTRL+J
Toggle visibility of the lower panel, containing Problems, Output, Debug Console, Terminal, GitLens and Watch.
CTRL+K   M
Set the language mode for the file displayed in the editor.
CTRL+K   CTRL+S
Display / edit the Keyboard Shortcuts definitions.
You can filter the keybindings by pressing ALT+K or clicking the icon of the little keyboard at the top right of the Keyboard Shortcut page, then press the keys that you want to see the key binding for. \ The keyboard icon starts keystroke recording mode. Recording mode is sticky; each time you revisit the Keyboard Shortcuts tab you can just press the keys you are interested in to see their bindings. Step by step:
  1. When you press the CTRL key you will see "ctrl" displayed, and recording mode continues to listen to what you type. Don't do this right now, but FYI, if you toggle keystroke recording mode now, and then remove the quotes around "ctrl", you will see a sorted list of all the key chords bound to CTRL.
  2. Next, when you add the Shift key to the key chord, you then see "ctrl+shift" displayed. Don't do this right now, but FYI, if you toggle keystroke recording mode now, and then remove the quotes, you will see a sorted list of all the key chords bound to CTRL+Shift.
  3. Finally, adding the = key to the key chord shows all the commands bound to CTRL+Shift+=.
CTRL+K+0 (zero)
Completely fold the active editor contents.
CTRL+K+1 (one)
Fold level 1 the active editor contents.
CTRL+K+2
Fold level 2 the active editor contents.
CTRL+B
Toggle side bar visibility.
CTRL+P
Show names of recently opened tabs, which might contain files to edit, or might be VSCode settings, or VSCode key bindings, etc. Click on a tab name to open it. This key binding is bound to Go to File, which is somewhat logical but not the most descriptive name.
CTRL+Shift+P
Open the Command Palette.
CTRL+L   G
Open the active (currently edited) file on GitHub in the default web browser. Requires the Open in GitHub extension.
CTRL+, (comma)
Open the Settings tab.
CTRL+Shift+T
Reopen the most recently closed editor tab.
ALT+Shift+F
Format the current file.

Annoying Side Bar Auto Reveal

Problem

When editing a file, if you CTRL+click on a function, method or class name defined in a dependency, the dependency's folder will be expanded in the side bar. Some dependencies are deeply nested, which means that the side bar expands quite a lot. In order to close the folders in the side bar it is necessary to go all the way back to the top of that folder, which is annoying and wastes time.

Solution

In settings, look for Explorer: Auto Reveal, which controls whether the explorer should automatically reveal and select files when opening them.

To do that, bring up settings with CTRL+, (comma), and then type reveal ex into the filter.

The default value is true. Change the value to false.

Bonus: Reveal Active File in Side Bar

To scroll to a file that you are editing in the list of files in the side bar, right-click on the file's tab, then select Reveal in side bar.

Even better, define a keyboard shortcut to do this:

  1. Bring up the Keyboard Shortcuts definitions by typing CTRL+K   CTRL+S.
  2. Type reveal side into the search bar.
  3. Double-click on File: Reveal Active File in Side Bar.
  4. For my desired key shortcut, I pressed CTRL+Shift+ALT+R, then pressed Enter.

Extensions

Extension Directory

Extensions are stored in ~/.vscode/extensions/.

Settings

User settings are stored in %AppData%\Code\User\ on Windows, in files called settings.json, keybindings.json, syncLocalSettings.json and tasks.json.

Project settings are stored in .vscode/ on all platforms, in files called launch.json, settings.json and tasks.json.

Workspace settings are stored in files with a .code-workspace filetype. They can be painful to work with because paths in them are OS-dependent.

Open Windows Directory From File Explorer

The ability to have Visual Studio Code open a Windows directory from File Explorer is useful. When you install VS Code for Windows, you can add an Open with Code action to the Windows Explorer file context menu by enabling the two options that are highlighted in the image below.

To add the ability without reinstalling VSCode, save the following file, then double-click on it.

vscode_open_dir.reg 
Windows Registry Editor Version 5.00

; Open files [HKEY_CLASSES_ROOT\*\shell\Open with VS Code] @="Edit with VS Code"
"Icon"="%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe,0"

[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open in VS Code"
"Icon"="\"%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe\" \"%1\""

; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open in VS Code"
"Icon"="\"%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe\",0"

[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"%LocalAppData%\\Programs\\Microsoft VS Code\\Code.exe\" \"%V\""

There is no need to reboot your computer. Now you should see a new entry when you right-click on a directory:

Thanks to Erick Petrucelli and Walid Bousseta on StackOverflow for this procedure.



* indicates a required field.

Please select the following to receive Mike Slinn’s newsletter:

You can unsubscribe at any time by clicking the link in the footer of emails.

Mike Slinn uses Mailchimp as his marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp’s privacy practices.