Create a VS Code snippet

We want to write a snippet in VS Code so that we can create HTML pages from our template.

How to create the snippet

  1. Go to "Code > Settings"
  2. Select "Configure Snippets"
  3. Select "HTML"
  4. Convert the existing HTML template into a VS Code snippet using snippet generator
  5. Check the prefixes, description and variables are correct
  6. Update your user preferences: "editor.tabCompletion": "on"
  7. NB To edit an existing snippet repeat the above and select "Existing Snippets"

How to use the snippet

  1. Create a new HTML page
  2. Start typing one of the new template prefixes e.g. pac-page and select a snippet e.g. "People & Code HTML Page"
  3. Replace the variables, meta description, title and page header, with values.

Tips

To access your "User preferences":
  1. Mac: ⌘ Shift + P / Windows: Ctrl Shift + P
  2. Type: "User Settings", short for "Preferences: Open User Settings (JSON)"
To navigate between items:

To delete a project or global snippet:

  1. Mac: ⌘ Shift + P / Windows: Ctrl Shift + P
  2. Enter or select: "Snippets: Configure Snippets"
  3. Select the snippet to delete
  4. Right click on the snippet tab name
  5. Select "Reveal in Finder"
  6. Delete the snippet

References

Snippets in Visual Studio Code
Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. Microsoft VS Code.
snippet generator
Online snippet generator for VS Code, Sublime Text and Atom by Pawel Grzybek.
Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners
An introduction from Rob O'Leary at freecodecamp.