changing the default settings or formatting of the html skeleton?

Question

I pretty new on these things and im trying to improve my self on html skeleton. So when I call html skeleton on vscode it's being like this as you know.

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

but i want to change default html skeleton content as like this;

<!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>
    <style>
        body{background-color: black;}
    </style>
</head>
<body>
    
</body>
</html>

Someone can help me with this?

I believe this may be a duplicate of the post [How to edit existing VS Code Snippets](https://stackoverflow.com/questions/40110541/how-to-edit-existing-vs-code-snippets). If not, please clarify what in that post fails to address your issue here. — Alexander Nied, Dec 23 '21 at 05:08

score 2 · Answer 1 · answered Dec 23 '21 at 08:23

You can make your own custom snippet using vscode.

As in your case you can create one using the following steps:

Open the gear icon on the bottom left of you vscode.

Select user snippet
Type html

Adding your custom html skelton

You can now add this code to have your custom skelton:

     "boilerplate": {
        "prefix": "log",
        body: [
                  "<!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>",
                  "    <style>",
                  "        body{background-color: black;}",
                  "    </style>",
                  "</head>",
                  "<body>",
                  "    ",
                  "</body>",
                  "</html>",
                ],
                "description": ""
              }
        ],
        "description": "Log output to console"
     }
}

I haven't changed the prefix, but it can be changed through "prefix": ""

Using the custom snippet

To use the custom snippet, just type the prefix in the html file to get the results!

If you want to add you own custom code, and have problem in converting it into snippet, here's a website which will help in that: snippet generator

For more knowledge this video can help: YouTube video

changing the default settings or formatting of the html skeleton?

1 Answers1

You can make your own custom snippet using vscode.

Adding your custom html skelton

Using the custom snippet