0

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>
cssyphus
  • 37,875
  • 18
  • 96
  • 111

4 Answers4

5

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

cssyphus
  • 37,875
  • 18
  • 96
  • 111
2

Just want to add that, if you want to use single quotes around attribute values in JSX/TSX while still want to keep the existing behavior (e.g. double quotes around attribute values) for .html files, you can use:

{
  "emmet.includeLanguages": {
    "javascriptreact": "xml",
    "typescriptreact": "xml"
  },
  "emmet.syntaxProfiles": {
    "xml": {
      "attr_quotes": "single"
    }
  }
}

References:

Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
  • Thanks for adding this note, but I'm not sure what you mean - what is the significance of "xml", what does that effect (other than actual xml). When would someone use this, can you provide a couple of examples? What existing behavior would one preserve (for example). *Thanks!* – cssyphus Aug 12 '21 at 12:13
  • @cssyphus For example, if I want to use double quotes for html files while using single quotes for jsx/tsx files, then this setting would come in handy. – Wenfang Du Aug 12 '21 at 13:14
  • @cssyphus Or there're other customizations made for the html profile, and you don't want jsx/tsx files to use them. – Wenfang Du Aug 12 '21 at 13:20
0

If you are using prettier, search for single quotes in settings and just check Prettier: Jsx Single Quote

Joy
  • 109
  • 2
  • 10
0

In VSCode, to autocomplete attributes with single/double quotes, search following property in File > Preferences > Settings based on file types and update drop-down values to either single or double.

  1. For HTML files: html.completion.attributeDefaultValue

  2. For JavaScript files: javascript.preferences.quoteStyle

  3. For TypeScript files: typescript.preferences.quoteStyle

Dhaval L.
  • 319
  • 5
  • 7
  • this is an answer to the wrong question. this question is about emmet- not manually-typed attributes. – starball Aug 27 '23 at 19:31