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.