creating your boiler plate for vscode

@amitmund June 08, 2026

Type less and get your quick code.

`ctrl+shift+p` or `cmd+shift+p` > `User shippets` 

or

vscode > file > preferences > User Snippets
  • Select html.json (for html).
{
  "HTML5 Boilerplate": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>${1:Document}</title>",
      "</head>",
      "<body>",
      "    ${0}",
      "</body>",
      "</html>"
    ],
    "description": "Generates a standard HTML5 boilerplate"
  }
}   

And now open a html file or save a file with .html and type html5


For js

  • select js.json
{
  "Hello World Boilerplate": {
    "prefix": "hw",
    "body": [
      "console.log('Hello World');",
      ""
    ],
    "description": "Prints Hello World to the console"
  }
}   

For this you need to type hw


Need to try.

I believe you can have a global file, And safe similar for all the different type of file, having a prefix correctly.

How about jshw, htmlhw, pythonhw

and so on...


Did tried and worked, but not suggested

{
  "HTML5 Boilerplate": {
    "prefix": "html5hw",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>${1:Document}</title>",
      "</head>",
      "<body>",
      "    ${0}",
      "</body>",
      "</html>"
    ],
    "description": "Generates a standard HTML5 boilerplate"
  },
    "javascript Boilerplate": {
    "prefix": "jshw",
    "body": [
      "console.log('Hello World');",
      ""
    ],
    "description": "Prints Hello World to the console"
  },
   "Python Boilerplate": {
    "prefix": "pythonhw",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "\"\"\"$1\"\"\"",
      "",
      "def main():",
      "    ${0}",
      "",
      "if __name__ == '__main__':",
      "    main()"
    ],
    "description": "Generates a standard Python 3 boilerplate"
  },
}   


Suggestion:

1. Installation Steps
You need to copy each block into its corresponding language file:

HTML5 Snippet:
Open html.json (via Ctrl+Shift+P > "User Snippets" > html.json).
Paste the HTML5 Boilerplate block inside the { }.
Usage: Type html5hw in an .html file.
JavaScript Snippet:
Open javascript.json (or typescript.json if you use TS).
Paste the javascript Boilerplate block inside the { }.
Usage: Type jshw in a .js file.
Python Snippet:
Open python.json.
Paste the Python Boilerplate block inside the { }.
Usage: Type pythonhw in a .py file.
0 Likes
52 Views
0 Comments

Filters

No filters available for this view.

Reset All