html snippet vscode code example

Example 1: how to make snippets vscode

Hit > shift + command + p and type snippets
Select Preferences: Open User Snippets
Choose the language type for which you want to add the custom snippet
vscode has comments to explain on how to add a snippet, as described on :> vsdoc
Lets say, we want to open custom snippets for the language GO. Then we can do:

Hit > command + p
Type: go.json + enter And you land on the custom snippet page
Snippets are defined in a JSON format and stored in a per user (languageId).json file. For example, Markdown snippets go in a markdown.json file.

Update new tools:
Snippet generator site: https://snippet-generator.app/

Example 2: html skeleton shortcut vs code

type "!" (exclamation mark) and press enter in vs code.

//below code will be generated
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Example 3: visual studio code html template shortcut

First set HTML to the language
Then type:

html:5

And hit Tab

Voila, HTML Template in your favorite code editor!

Example 4: html snippets vscode not working

YOU SHOULD AGAIN RE-INSTALL VSCODE AND DOWNLOAD HTML SNIPPETS