How to change the basic html structure in VS code?

Question

I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]

What I have when I press [! tab]:

<!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>

What I would like to set it to for example :

<!DOCTYPE html>
<html lang="fr">
<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">    
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <title>Document</title>

</head>
<body>
    
</body>
</html>

I tried looking into the html snippets parameters but didn't find anything.

Does this answer your question? How to edit existing VS Code Snippets — Emre
– Emre, Commented Nov 20, 2022 at 16:43

Laaouatni Anas · Accepted Answer · 2022-11-20 18:14:32Z

1

To overwrite existing emmets in VS Code:

Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.

{
  "html": {
   "snippets": {
     "!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
   }
 },
 "css": {
   "snippets": {}
 }
}

Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)

To learn more about how custom snippets work, check this article

edited Nov 20, 2022 at 18:14

Laaouatni Anas

4,0952 gold badges15 silver badges36 bronze badges

answered Nov 20, 2022 at 17:20

Sanidhya

3113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes Rodriguez · Accepted Answer · 2024-06-30 00:59:14Z