VS Code tips and tricks
1 Introduction
This page collects tips and tricks that will make you more efficient in VS Code. None of this is required for the course, but the time you invest in learning your editor will pay off quickly, since you’ll spend many hours in it.
Nearly everything here applies both to VS Code at OSC, which runs in your browser, and to a VS Code installation on your own computer.
Because VS Code at OSC runs inside your browser, a few keyboard shortcuts are “captured” by the browser instead of by VS Code. For example, Ctrl/⌘+W may close your browser tab rather than the file you have open in the editor.
Whenever a shortcut doesn’t do what you expect, you can find the same functionality through the menus or the Command Palette (see below).
1.1 Setting up
To try things out as you read, start a VS Code session at https://ondemand.osc.edu (or open your local VS Code installation) and open a file or two, such as one of the scripts you wrote in week 7.
2 Finding functionality
2.1 The Command Palette
To find and apply any menu option that is available in VS Code, the so-called “Command Palette” is handy. To access it, click and then Command Palette (or press F1 or Ctrl/⌘+Shift+P). To use it, start typing something to search for an option.
The Command Palette also shows the keyboard shortcut for each option, if there is one, so it is a good way to discover shortcuts for things you do often.
2.2 Keyboard shortcuts overview
For a single-page PDF overview of keyboard shortcuts for your operating system: > Help > Keyboard Shortcut Reference. (Or for direct links to these PDFs on the web: Windows / Mac / Linux.)
To see, change, or add keyboard shortcuts, click > Keyboard Shortcuts, like you did in class to add the Ctrl+Enter shortcut to send code to the terminal.
3 Working in the editor
3.1 Line actions
Automatic whole-line selection
In VS Code’s editor pane, the entire line that your cursor is on is selected by default. As such, you don’t need to manually select the entire line when wanting to send it to the terminal — or when cutting/copying lines! The standard copy and cut shortcuts (Ctrl/⌘+C / X) will cut/copy the entire line that the cursor is on.Move a line up or down: Alt/Option+⬆/⬇
Delete a line: Ctrl/⌘+Shift+K
Comment or uncomment a line: Ctrl/⌘+/
This inserts or removes the comment character for the current language, e.g.#in a shell script. This is handy to temporarily deactivate (“comment out”) code.
All of the above also work for multiple selected lines at once.
3.2 Go to a specific line
Error messages often mention a line number, as in:
scripts/fastqc.sh: line 8: $1: unbound variable
To jump to a line, press Ctrl+G (on a Mac too) and type the line number. Alternatively, click on the Ln <number>, Col <number> indicator in the Status Bar at the bottom of the window.
3.3 Find and replace
- Find in the current file: Ctrl/⌘+F.
- Find and replace in the current file: Ctrl+H (Windows/Linux) or Option+⌘+F (Mac).
- Search across all files in the folder you opened in VS Code: click the magnifying glass icon in the Activity Bar, or press Ctrl/⌘+Shift+F. You can also replace across files from there.
The search box has buttons to make your search case-sensitive (Aa), match whole words only (ab), or use a regular expression (.*).
3.4 Multiple cursors
VS Code lets you type in multiple places at once, which is great for making the same edit on several lines:
- Add a cursor where you click: hold Alt/Option while clicking.
- Select the next occurrence of the currently selected text: Ctrl/⌘+D (press repeatedly to add more occurrences).
- Column (“box”) selection: hold Shift+Alt/Option while dragging your mouse.
Press Esc to go back to a single cursor.
5 Settings
You can open the Settings via > Settings, and then search for the setting you want to change.
The Settings editor has two tabs at the top: User and Workspace.
- User settings apply everywhere you use VS Code.
- Workspace settings only apply to the folder you currently have open, and are saved in a file
.vscode/settings.jsoninside that folder.
Change your User settings unless you have a specific reason to do otherwise.
Some settings you may want to change:
Auto Save
Auto-saving is turned on by default using the “afterDelay” option. You can:- Quickly turn it off by clicking >
File>Auto Save(shows a checkmark when activated). - Search for “Auto Save” in the Settings, where you can pick from several options.
- Quickly turn it off by clicking >
Word wrap
By default, long lines run off the right side of the editor. To wrap them instead, click >View>Word Wrap(or press Alt/Option+Z). To make this permanent, search for “Word Wrap” in the Settings.Minimap
The “minimap” is the zoomed-out view of your file on the right side of the editor. If you find it distracting, you can hide it via >View>Appearance>Minimap.Font size
Search for “Font Size” in the Settings to change the font size of the editor (“Editor: Font Size”) and, separately, of the terminal (“Terminal › Integrated: Font Size”).A vertical line to mark line length
To keep your lines of code and Markdown text from getting too long, you can show one or more vertical lines (“rulers”) at a specific width: search for “Rulers” in the Settings, clickEdit in settings.json, and add e.g.80between the square brackets:"editor.rulers": [80].Tidying up whitespace
Search for and turn on “Trim Trailing Whitespace” (removes spaces at the ends of lines when you save a file) and “Insert Final Newline” (makes sure a file ends with a newline, which some command-line tools expect).
6 Extensions
VS Code extensions are small programs that add functionality to VS Code. To install one, click the Extensions icon in the Activity Bar (see screenshot below), search for the extension, and click Install.
Activity Bar, with the Extensions icon (bottom) highlighted.
6.1 Extensions used in the course
- HTML Preview (by Thomas Haakon Townsend) — view HTML files, like FastQC output, inside VS Code (week 6).
- ShellCheck (by timonwong) — check your shell scripts for errors and bad practices (week 7). At OSC, this needs a work-around to function — see the first shell scripting lecture.
6.2 Other useful extensions
- Rainbow CSV (by mechatroner) — makes CSV/TSV files easier to view in the editor pane, with column-based colors.
- Code Spell Checker (by Street Side Software) — flags spelling mistakes in your Markdown files and code comments.
- markdownlint (by David Anson) — checks your Markdown files for formatting issues and inconsistencies.
- Markdown All in One (by Yu Zhang) — adds keyboard shortcuts for Markdown formatting, automatic list continuation, and table of contents generation.