Single Quotes in Emmet With VS Web Essentials

Question

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.

Answer 1

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

Answer 2

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.