VSCode Make Emmet use single quotes instead of double quotes in class names and ids

By default, Emmet in VSCode uses double quotes when expanding class names and IDs. For example, expanding

#bob.frank

creates

<div id="bob" class="frank"></div>

Is there a way to make Emmet use single quotes, e.g.

<div id='bob' class='frank'></div>

The solution is to add these lines into the settings.json file:

"emmet.syntaxProfiles": {
    "svelte": "html",
    "typescript": "html",
    "javascriptreact": "html",
    "typescriptreact": "html",
    "html": {
        "attr_quotes": "single",
        "self_closing_tag": true,
    },
},
"emmet.includeLanguages": {
    "svelte": "html",
    "typescript": "html",
    "javascriptreact": "html",
    "typescriptreact": "html",
    //"javascript": "javascriptreact"
},

(Of course, you only need to include languages that you are actually using. For eg, if you are not using svelte (why not??) or typescript then leave 'em out)

Extra:

If you are also wondering how to use the Tab key to expand Emmet abbreviations, add this line also:

"emmet.triggerExpansionOnTab": true,

So: for each language that you use Emmet with, you want to map that language type to "html", and then in the "html" key, tell it to use "attr_quotes": "single"

Where Do I Make This Change?

Depending on your platform, the user settings file (settings.json) is located here:

Windows: %APPDATA%\Code\User\settings.json
macOS  : $HOME/Library/Application Support/Code/User/settings.json
Linux  : $HOME/.config/Code/User/settings.json

ALTERNATE method to open the settings.json file inside VSCode:

a. Ctrl + , (comma) to open Settings
b. Workbench
c. Settings Editor
e. In the search box at top, type emmet.
f. On the left, click Workbench and then Appearance
g. Click the link to right: Edit in settings.json

References:

https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/

Where are the default Emmet settings in Visual Studio Code?

https://github.com/Microsoft/vscode/issues/32496

https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/

https://sudolabs.io/blog/tips-to-use-vscode-more-efficiently