11

Is there a way how to force Visual Studio Web Essentials to insert single quotes instead of double quotes?

For instance so that div.col-xs-1 TAB produces <div class='col-xs-1'></div> instead of default <div class="col-xs-1"></div>?

I am using Visual Studio 2013 Update 4 with Web Essentials 2013 v. 2.5.3.

grizzly
  • 1,146
  • 12
  • 26

2 Answers2

18

Not to be a johnny come lately, but I was having trouble getting this to work in VS code, and so I thought I would post a solution for anyone still having this problem. My solution was to go into settings (ctrl-,) > user settings > extensions > emmet and under preferences click "Edit in settings.json". There, I added this to the user settings:

"emmet.syntaxProfiles": {
    "xml": {
        "attr_quotes": "single"
    },
    "html": {
        "attr_quotes": "single"
    },
    "js": {
        "attr_quotes": "single",
        "self_closing_tag": true
    },
    "jsx": {
        "attr_quotes": "single",
        "self_closing_tag": true
    }
}

Where each language you can define settings for. This worked for me.

Marco Principio
  • 475
  • 3
  • 9
  • 2
    Thanks, I was in a deep rabbit hole trying to figure this out. This is the solution that helped me (VS Code ver 1.42.0). To be explicit, added the code you provided to my `settings.json` file for Code - I did not create a separate file or directory. – Anthony Apr 02 '20 at 19:33
  • Thanks for this! I did ctrl + shift + p to get into the popup. I searched 'settings json'. Click on 'Preferences: Open Settings (JSON)'. Then added the above settings at the very bottom and it worked perfectly. – Nhon Ha Jun 19 '20 at 01:51
  • 1
    This question was regarding using VS Web essentials with Visual Studio (Not VS Code) – glenho123 Aug 26 '20 at 22:29
  • doesnt work in vs code – fdrv Jan 13 '22 at 06:16
  • This is the only bloody solution that worked for me like a charm. Thanks! – terryeah Jun 12 '22 at 11:09
2

To get single quotes working with JSX you will need to update or create the syntaxProfiles.json in ~/emmet with the syntax profile. If ~/emmet does not exist create it.

The key is the file extension and the value is the name of the profile that extension will use.

So in ~/emmet/syntaxProfiles.json

/* 'js' will map files with .js extension to use the js profile*/
/* 'jsx' will map files with .jsx extension to also use the js profile*/
{
  "js": "js",
  "jsx": "js"
}

And in ~/emmet/profiles.json

/* create or add the 'js' profile */
{
  "html": {
    "attr_quotes": "double"
  },
  "js": {
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}

This should work for most editors but I have only tried in atom. https://github.com/emmetio/emmet-atom/issues/68

Jonny
  • 431
  • 4
  • 8