search

evrowe / vscode-ember-syntax

Ember HTMLBars and Glimmer syntax highlighting
2 stars 1 forks source link

Conflicts with emmet? #1

Closed muxcmux closed 7 years ago

muxcmux commented 7 years ago

Hello,

When having the extension installed, I am unable to use key completion for emmet abbreviations, e.g.: div.nav.nav--white<tab> doesn't expand to <div class="nav nav--white"></div>

Do you have any idea what might be causing this and/or any way to solve it?

Thanks!

DHedgecock commented 7 years ago

Looks like the VSCode Emmet extension is only activated for their javascriptreact and typescriptreact language ids: https://github.com/Microsoft/vscode-emmet/blob/master/package.json (see activationEvents).

This is one of the trickiest parts of VSCode extensions I've found so far. Extensions are supposed to declare what languages they're activated for in their package.json. This extension uses a language id of javascript, but b/c the Ember community is behind on using single file components VSCode has set up Emmet to only work in with JavaScript+React (which technically makes sense because you shouldn't have HTML mixed into plain JS).

I'm not sure how best to handle this. We could change the language id to javascriptreact since most extensions handling HTML in JS are expecting that language id. Or, you could open a PR against the Microsoft Emmet extension adding "onLanguage:javascript" to the package activationEvents.

I'm leaning towards renaming the language id to javascriptreact but want to think about it for a day or two first.

DHedgecock commented 7 years ago

I opened a PR on VSCode Emmet to try and add javascript to the activation events. I'd like to see if that gets traction before changing the language id.

DHedgecock commented 7 years ago

@muxcmux good news, I did some more digging and found a way users can tell Emmet additional languages to complete inside: https://code.visualstudio.com/docs/languages/html#_emmet-snippets

We have set the language id of any htmlbars to handlebars, so adding this to your user preferences enables Emmet inside .hbs files and inside inline template strings:

"emmet.syntaxProfiles": {
  "handlebars": "html"
},

I'll add an explanation to the README for other users. I'm going to close this issue as this is a simple enough workaround. Thanks for contributing!

muxcmux commented 7 years ago

@DHedgecock Thank you! Awesome extension, keep it up!