visual studio code - Link+tab shortcut Emmet on VSCode - How can I get the "type" to be included in this?

Question

When I type the shortcut link+tab to get the link tag and attributes.

It only shows:
<link rel="stylesheet" href="">

When i want it to show:
<link rel="stylesheet" type="text/css" href="">
or
<link rel="stylesheet" type="" href="">

How can I change the built-in emmet shortcut/snippet to do this? I've tried going into preferences and shortcuts, etc. but haven't quite figured it out. Thanks for any help!

Answer 1

Put this into your settings:

"emmet.extensionsPath": "C:\Users\Mark\Test Bed\.vscode",  
// with path to your .vscode folder.
// right-click on the folder in your explorer bar and choose Copy Path - use that in above

The above will allow emmet to find the snippets you will create.

Create a snippets.json file in your .vscode folder.

Put this into that file:

{
  "html": {
    "snippets": {
        "link": "<link rel='stylesheet' type='text/css' href='${1}'>"
    }
  }
}

Reload vscode window after any changes to this file or you won't see the changes take effect!

or use this form if you want to use double quotes:

        "link": "<link rel="stylesheet" type="text/css" href="${1}">"

More info here: https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets