Option to show emmet suggestions in languages that are not pure mark up or stylesheet like

[tklepzig]

• VSCode Version: Code - Insiders 1.14.0-insider (15b579d, 2017-06-27T05:16:51.982Z)
• OS Version: Windows_NT ia32 10.0.10586
• Extensions: All disabled

---

Steps to Reproduce:

1. Create a new file with the following content:

import React from "react";

class MyComponent extends React.Component {
  
  render() {
   return div
  }
}

export default MyComponent;

2. Set language mode of the file to javascriptreact.
3. Place cursor after the div and trigger suggestion list.

Expected: The suggestion list contains the "expand emmet abbreviation" for the div tag.
Actual: The suggestion list contains no emmet entry at all.

[geirsagberg]

Also affects .tsx / Typescript React.

[ramya-rao-a]

We decided to disable the emmet abbreviations in the suggestion list in languages that are not pure mark up or stylesheet like. The reason was that there was no easy way for the emmet extension to understand the underlying language and identify the areas of the code where it should suggest emmet.

For example, in case of javascriptreact/typescriptreact, the emmet suggestions would show up no matter where (js vs html) you were typing. This got very noisy because in a jsx file you are most of the time writing js.

The solution we are aiming for is this:

• The emmet completion provider has been pulled out into its own npm module: https://www.npmjs.com/package/vscode-emmet-helper so that any extension can use this in its completion provider in just 2 lines of code. See Enable language extensions to call emmet completion provider #29114 (comment)
• Any React related extension can now
  • identify areas of the code that have markup
  • use this module to provide emmet completions.

So, now this issue becomes an extension candidate.

Note that the command Emmet: Expand Abbreviation and Emmet: Wrap with Abbreviation will continue to work in jsx/tsx files. Bind a keyboard shortcut for Emmet: Expand Abbreviation (other than tab) and you will be able to expand emmet abbreviations anywhere in jsx file

[tklepzig]

Ok, I understand your point. Is there maybe a chance to add an entry in the settings to change this, so to enable the emmet abbreviations in certain languages?

[ramya-rao-a]

@tklepzig If there would be such a setting, are you saying you wouldnt mind the emmet suggestions showing up when you are writing javascript code in javascriptreact file?

[geirsagberg]

Can't speak for @tklepzig, but I would certainly love the choice to press Tab to expand an Emmet snippet. That is more important than showing the suggestions, for me.

[tklepzig]

Yeah, I wouldn't mind if the emmet suggestions would show up in the whole jsx file.

[ramya-rao-a]

@geirsagberg We are definitely moving away from binding Tab to Emmet. See https://code.visualstudio.com/updates/v1_13#_emmet-abbreviation-expansion-in-suggestion-list for more on this.

You can still bind any other keyboard shortcut to Emmet: Expand Abbreviation command to get emmet expansions anywhere in the jsx file

@tklepzig I'll keep that in mind and look into options

[ramya-rao-a]

I have updated this issue title to track the option to allow suggestions to show up in non markup like languages like jsx

[nanaasumadu]

@ramya-rao-a
I have tested the new setting

"emmet.includeLanguages": { "php": "html" },
but emmet suggestion does not work.

html file

php file

"Emmet: Expand Abbrevation", however works.

[nanaasumadu]

@ramya-rao-a I can see that you have made a new commit to address this issue. I will test when the new build of insiders comes out this evening my time.

[ramya-rao-a]

The setting emmet.showExpandedAbbreviation now supports the below three values

• never: You will never see emmet abbreviations in the suggestion list for any language
• inDefaultEmmetModesOnly: This is the default. You will see emmet abbreviations in the suggestion list for languages that are supported by default by emmet (other than jsx). ['html','pug','slim','haml','xml','xsl','css','scss','sass','less','stylus']
• always: You will see emmet abbreviations in the suggestion list EVERYWHERE in your file as long as the language is either javascriptreact or typescriptreact or you have used the new setting emmet.includeLanguages to map any other language to one of the emmet supported languages

This change will be out in the next Insiders build (29th June, 2017)

Give it a try and let me know how it works out

[ramya-rao-a]

@nanaasumadu Yes, please wait for the next Insider's build.
cc @jens1o You have been doing quite some emmet testing, so including you here

:)

[tklepzig]

Thanks @ramya-rao-a! I will try this today with the new insiders (it's currently morning for me ;) )

[jens1o]

I'm going to try it out too. :)

[nanaasumadu]

@ramya-rao-a Thanks. With the setting below, emmet suggestions are working in PHP

"emmet.showExpandedAbbreviation": "always",
"emmet.includeLanguages": { "php": "html" }

[nanaasumadu]

[jens1o]

Yep, also working for me.

[nanaasumadu]

I think I have discovered a bug. Emmet suggestions fails when there is * for multiplication in the code.

Try this in both PHP and HTML
div.test>ul>li>a*3

"Emmet: Expand Abbreviation" command, however, works.

[tklepzig]

@ramya-rao-a Yeah, it's working as expected, with always every time the emmet expansion is available in jsx.

I would only suggest to change the always to something more specific to make clear that it's targeting the javascriptreact and typescriptreact languages if no other one is added to the emmet.includeLanguages setting.

[jens1o]

@nanaasumadu No, you didn't. It's already reported: #27784

[ramya-rao-a]

@tklepzig I agree, but can't come up with a nice name for that. Trust me I have tried 😭 If you have any ideas, am open to suggestions.

@jens1o #27784 is about expansion not working at all when there is a grouping followed by multiplication. What @nanaasumadu is saying is that the suggestions stop showing when you hit *.
That is related to #29758

@nanaasumadu Until #29758 is completely fixed, as a work around you can still press Ctrl+Space and manually trigger the suggestion

[ramya-rao-a]

Thanks for testing everyone!

[tklepzig]

@ramya-rao-a Hm, what do think about something like defaultAndIncludedLanguages (could be improved, only an idea ;) ) and add javascriptreact and typescriptreact as default to includeLanguages?

[ramya-rao-a]

Adding add javascriptreact and typescriptreact as default to includeLanguages doesn't make sense

includeLanguages is to map a non supported language to a supported language

like javascript: javascriptreact

[tklepzig]

Yeah, you are right, I forgot that it's a map, not just a list.
So maybe just leave it to the user? In the way, that defaultAndIncludedLanguages doesn't add anything unless includeLanguages is modified (including javascriptreact and typescriptreact)?

[ramya-rao-a]

I didnt want to include any references to the "includeLanguages" setting. Not many people would be aware of what that means.

One option I was toying around was "never", "always" and "inHtmlAndCssOnly"

[tklepzig]

Ok, I see your point.
Yeah, that sounds good, so all "combined" languages are excluded. Definitely a better name then the current one.

[ramya-rao-a]

ya but the problem is languages like jade, haml, xml also should be included

so more like "never", "always" and "inMarkupAndCssOnly"?

[tklepzig]

Yep, "Markup" sounds good. Should be clear enough which languages are included.

[ramya-rao-a]

Done.

See 158270d

[tklepzig]

Thx :)