How To Get Html Boilerplate In Vscode

by

Visual Studio Code (VSCode) is a popular and powerful code editor for developers of various programming languages. It comes with many built-in features, extensions, and snippets to make your coding experience more efficient and enjoyable. One of these features is quickly generating an HTML boilerplate code with just a few keystrokes. In this blog post, we will guide you on how to get the HTML boilerplate in VSCode.

Step 1: Create a New HTML File

To create a new HTML file in VSCode, click on File > New File or press the keyboard shortcut Ctrl + N (Windows) or Cmd + N (Mac). This will open a new, untitled file in the editor.

Step 2: Save the File as HTML

To save the new file as an HTML file, click on File > Save As or press the keyboard shortcut Ctrl + Shift + S (Windows) or Cmd + Shift + S (Mac). In the “Save As” dialog, choose a location to save the file, enter a file name with the .html extension, and click on the Save button.

Step 3: Generate the HTML Boilerplate

With the HTML file opened and focused, you can now generate the HTML boilerplate code. To do this, simply type ! followed by the Tab key or Enter key. This will automatically generate the standard HTML boilerplate code in the file. Alternatively, you can start typing “html” and select “html:5” from the suggestions list, then press the Tab or Enter key. 




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

Customizing the Boilerplate

In some cases, you may want to customize the generated HTML boilerplate to include additional elements, such as external stylesheets or scripts. To do this, simply add the necessary elements within the appropriate sections of the boilerplate code. For example, to include an external CSS file, add the following line within the <head> section: 

<link rel="stylesheet" href="styles.css">

Similarly, to include an external JavaScript file, add the following line just before the closing </body> tag: 

<script src="script.js"></script>

With this knowledge, you can now easily generate an HTML boilerplate in Visual Studio Code and customize it as needed for your web development projects. Happy coding!