Useful shortcuts and settings in VS Code

Published 11.11.2022 • Last modified 13.05.2024

Shortcuts #

Demo showing the usage of Ctrl+D shortcut

You’ll notice that many of these shortcuts are multi-cursor-related. It’s a feature you will miss in every text editor once you get good with it.

Emmet #

Emmet enables you to write HTML incredibly quickly. For example, typing a “!” in VS Code and pressing enter will output a default page skeleton. Shown below is a pretty complex Emmet Abbreviation, which expands to a bunch of HTML once I press enter.

Demonstration of using emmet Read more about Emmet at https://code.visualstudio.com/docs/editor/emmet.

Writing HTML by hand is slow and error-prone. That’s why great tools like Emmet exist. One particularly annoying thing is having to write the opening and closing tags separately every time you want to wrap something with another element. Fortunately there’s a shortcut called editor.emmet.action.wrapWithAbbreviation that will do it for you:

Demonstrating the Emmet: Wrap with Abbreviation command I’ve mapped this command to Ctrl + Alt + W so that I can access it easily.

You can also do the opposite, which is to remove a tag wrapping some inner HTML. This is done by the editor.emmet.action.removeTag command, as shown below:

Demonstrating the Emmet: Remove Tag command I’ve mapped this command to Ctrl + Alt + R.

Settings #

Bracket Pair Colorization Off
Bracket Pair Colorization O...
Bracket Pair Colorization On
Bracket Pair Colorization...
Viewer does not support full SVG 1.1

Extensions #