Here are some handy shortcuts in Visual Studio Code that may save some time when creating a new HTML file.
These include code that you will probably need when creating a new HTML file. So using these shortcuts can help create the overall structure of almost any HTML file. This way you can quickly set up the new file and focus on the rest of the code.
These shortcuts are based on “Emmet Abbreviation” - a built-in feature in VS Code.
For this to work, make sure the file you’re working on is HTML / PHP / any other file type that supports the HTML markup.
HTML page structure
! and then pressing the
Enter key will add the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>
Connecting a JS file
script:src + pressing
Enter will generate this code:
Connecting a CSS file
link:css + pressing
Enter will generate the following:
<link rel="stylesheet" href="style.css" />
Parts of the code that you might want to modify (like
href="style.css") are automatically highlighted when inserted, so you can change them instantly.
Tab key will change the position of the cursor to the next part of the code that you may want to adjust (such as
This way, you can quickly adjust these code snippets to your own code.