How do I make it so that emmet expands classNames in JSX and JS files using single quotes instead of double?

[dealvz]

• VSCode Version: 1.7.2
• OS Version: Win10

I've tried adding a custom syntaxprofile for jsx like so:

"emmet.syntaxProfiles": { "jsx": { "attr_quotes": "single" } }

This does not work. Emmet still expands classNames using double quotes.
Also, how to make using single quotes the default behavior for .js files and not just .jsx files?

[dealvz]

I'm also not quite sure but I think I was able to do this in 1.7.0 but not with 1.7.1+

is this an issue or is it possible and there is just a setting that i'm missing?

[mjbvz]

As a workaround, you can use:

"emmet.syntaxProfiles": {
    "javascriptreact": "html",
    "html": {
        "attr_quotes": "single"
    }
}

---

As for the actual fix, I did a quick investigation. I think the root cause is that we do not support selecting the correct profile name. getProfileName always returns null, but if I update it to return this.getSyntax(); instead, I see jsx profiles working as expected

[dealvz]

Ah yes, I've tried that however it breaks "className" expansion for jsx and replaces it with just "class" as it should be for html.

<div className="test"></div>

becomes

<div class='test'></div>

[dealvz]

Any update on this guys? Also, is this an issue or just a missing feature?

[ramya-rao-a]

@kvoth3 We will look into this more in the current milestone

[ramya-rao-a]

@kvoth3 For now, can you try the below ?

"emmet.syntaxProfiles": {
    "xml":{
        "attr_quotes": "single"
    }
}

jsx syntax uses the xml profile by default. (See https://github.com/emmetio/emmet/blob/master/lib/snippets.json#L988). Any changes made to the xml profile gets inherited by jsx files

@mrmlnc @sergeche http://docs.emmet.io/customization/syntax-profiles/#create-your-own-profile says that we can create our own profile. Meaning the below should work or have we misunderstood the docs?

"jsx": {
            "attr_quotes": "single"
        }

[ramya-rao-a]

cc @egamma

[ramya-rao-a]

@mrmlnc @sergeche If we update the getProfileName method to return the profilename, then the below setting works

"jsx": {
            "attr_quotes": "single"
        }

But, the documentation says that editors can return null (which is what we do as of now), and emmet would guess the best profile name based on the syntax and user data (which is passed via loadProfiles()).

So why is that emmet is not able to guess the right profile name for jsx files? It guesses the profile name to be xml and does not use the profile set by the user

[dealvz]

@ramya-rao-a Thanks that's a great workaround for now!

[ramya-rao-a]

@mrmlnc @sergeche I tried the same setting as below in syntaxProfiles.json for Sublime Text. Doesnt work there as well.

"jsx": {
            "attr_quotes": "single"
        }

Which brings me to conclude that creating your own profile for syntax other than "html" and "xml" doesn't work unless the editor implements the getProfileName

[sergeche]

@ramya-rao-a editor must properly detect profile name for current syntax. If it fails to do so (method not implemented, syntax is unknown etc.) it falls back to html profile

[sergeche]

@ramya-rao-a not that I’m working on a new Emmet implementation right now which will use different API and logic

[ramya-rao-a]

Thanks for confirming @sergeche!