susanBuck / e15-spring22

0 stars 0 forks source link

VSCode snippets #4

Closed susanBuck closed 2 years ago

susanBuck commented 2 years ago

In the Week 2 videos published yesterday, I made reference to a feature in VSCode called snippets where you can define shortcuts for frequently used code blocks. Specifically, I used snippets to fill out the basic HTML structure of a view file.

If you've never worked with snippets before, here's some general info: https://code.visualstudio.com/docs/editor/userdefinedsnippets

And below is what my html.json snippets file looks like (setting this file up is covered in the above guide under "Create your own snippets").

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "HTML Template": {
        "prefix": "html",
        "body": [
            "<!doctype html>",
            "<html lang='en'>",
            "<head>",
            "    <title></title>",
            "    <meta charset='utf-8'>",
            "    <link href=data: , rel=icon>",
            "</head>",
            "<body>",
            "$0",
            "</body>",
            "</html>"
        ],
        "description": "HTML Template"
    }
}

If you dig into snippets and have any questions, let me know.

gabichuela85 commented 2 years ago

This was really helpful. Thank you!