In this tutorial you will learn how to fix the HTML5 Boilerplate Emmet Shortcut Key in Visual Studio Code aka VS Code. If the Shift + 1 shortcut key is not working then this is the solution.

June 2022 (version 1.69)

Welcome to the June 2022 release of Visual Studio Code. There are many updates in this version that we hope you’ll like, some of the key highlights include:

3-way merge editor – Resolve merge conflicts within VS Code.
Command Center – New UI to search files, run commands, and navigate cursor history.
Do Not Disturb mode – Silence non-critical notification popups.
Toggle Light/Dark themes – Quickly switch between preferred light and dark themes.
Terminal shell integration – Display command status, run recent commands, and more.
Task output decorations – Highlights task success or failure exit codes.
Git Commit action button – Configure your default Git Commit action.
Debug Step Into Target support – Allows you to step directly into functions when paused.
JavaScript sourcemap toggling – Switch to debugging compiled rather than source code.
Color theme tester – Use vscode.dev to preview color themes.
VS Code Server preview – Run the same server used for Remote Development.

Sadly with this update they also somehow disabled the shortcut key for the HTML5 Boilerplate using Emmet that was Shift+1 then followed by TAB or Enter.

Why they did this… don`t ask me… but they did. So now we need to FIX it

Here are two possibilities:

Use html:5 code snippet
Re-Activate the ! code snippet using Emmet with the Shift+1

HTML:5 code snippet

In Visual Studio Code simply typing in html:5 will show you the <!DOCTYPE html> boilerplate using the build in Emmet Abbreviation in VS Code.

HTML Boilerplate Shortcut Key Shift +1

I guess the you still prefer the Shift +1 Shortcut key since you are still reading this article.

Here is how you can reactivate it.

Having Visual Studio code opened, go down in your left corner and click on the Manage icon.

From the Manage tab you can now chose the Command Palette. Click on the Command Palette to open it op.

In the Command Pallet type in “open user settings” and click on it.

In the user settings menu search for “Emmet” and click on it to open up the settings for Emmet.

Then scroll down to the bottom thill you find “Trigger Expansion on Tab” and check the “When enabled, Emmet abbreviations are expanded when pressing TAB”.