Vscode: Emmet and Intellisense overlap in SCCS files

[kareljan]

Emmet is acting up in strange ways.
When I type, as an example, "cp+tab" I expect "cursor: pointer". I know this is not the official emmet abbriviation. But even when I type "cur:p + tab" I get "cur:past" instead of "cursor:pointer". That VS Code extends other things is great. But when I type "cp", I at least expect "cursor: pointer " to be in the autocomplete window.
It's not only an issue with the cursor abbriviation. I have it all the time with others properties too.

This issue can be related to .scss files. I dont' know if it's like that in css files.

Can this be fixed please.

[egamma]

CC @aeschli

What is happening is that the Intellisense provided by Code for SCCS files and Emmet overlap in this case.

When you start typing then Intellisense is active. To deactivate Intellisense you have to press ESC and then you can press TAB to get the emmet expansion.

Emmet works properly when I use the cheatsheet as a reference. You can verify this by invoking Emmet Expand Abbreviation from the command palette:

• cur:p -> cursor: pointer
• cp -> clip: ;

Another approach is to bind the emmet command expandAbbreviation to another key in your keybinding.json file. For example:

    {
        "key": "ctrl+m",
        "command": "editor.emmet.action.expandAbbreviation",
        "when": "editorTextFocus && !editorHasSelection && !editorHasMultipleSelections && !editorTabMovesFocus"
    }

Then you can force an emmet expansion using this keybinding.

[brianblakely]

It would be great if we could tell Code to prioritize Emmet completion over Intellisense in scenarios such as these.

When writing CSS, I would never want db[tab] to produce :double-button instead of display: block;, but that's what happens right now.

[aeschli]

@brianblakely You can change this in your keybindings file.
Add

{ "key": "tab",                   "command": "-acceptSelectedSuggestion"},

if you don't wan't to complete completion-proposals with the tab key.

Add

{ "key": "tab",                   "command": "editor.emmet.action.expandAbbreviation",
                                     "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorHasMultipleSelections && !editorHasSelection && !editorReadonly && !editorTabMovesFocus" }
}

To give emmet priority.
When evaluating a keybinding, VSCode first looks in the user keybinding settings, bottom to top, then in the default settings, bottom to top. It will take the first command where the when clause matches.

[borisowsky]

@aeschli the problem of this solution is that you cannot use [tab] autocompletion in none-sass files (in jsx, for example), you have to press [enter], instead. I think there must be "override" or/and profiles options, or maybe "priority" options in Emmet/IntelliSense, so I'd like to use Emmet in .sass, and also use IntelliSense predictions on tab in other files.

[ramya-rao-a]

@YuziRussianHax how about setting editor.quickSuggestions to false in css/sass files?

"[css]": {
        "editor.quickSuggestions": true
    }

The above will stop the suggestions showing up altogether in css files. The other files would continue to behave as is

[borisowsky]

@ramya-rao-a Oh my gosh, I was searching for this solution for so long. (I didnt find way to configure such things for specific language in official documentation). Thank you a lot!
"[sass]": { "editor.quickSuggestions": false }

[ramya-rao-a]

@YuziRussianHax Also if you do want the suggestions to show up you can always do Ctrl+Space and they will show up :)

Happy Coding!

[HazelZ]

@aeschli it is not working on the latest vs code OSX version

[ramya-rao-a]

@HazelZ What is not working on the latest vs code?

[leighkendell]

I don't think the suggestions above are acceptable. There needs to be a setting to prioritise emmet tab completion over quick suggestions. We shouldn't have to give up quick suggestions to make emmet shortcuts work.

[leighkendell]

Ah, just saw this: https://github.com/Microsoft/vscode/issues/21943 looks like emmet suggestions will show in the quick suggestions list with priority over others?

[ramya-rao-a]

Everyone, the wait is over.

Set emmet.useNewEmmet to true (in the latest Insiders dated 6/1 or above and eventually in the stable release of 1.13 and higher) to use the new emmet modules (https://www.npmjs.com/%7Eemmetio) for emmet features in VS Code.

Using these new emmet modules lets us now implement the feature to show emmet abbreviation expansions in the suggestion list.

You will see 2 kinds of suggestions in html files

• The expansion for the abbreviation that has been typed (you can turn this off by setting emmet.showExpandedAbbreviation to false
• All possible abbreviation whose prefix is the text that has been typed (you can turn this off by setting emmet.showAbbreviationSuggestions to false

In css/less/scss files you will see just the first kind above.

By setting emmet.useNewEmmet to true, tab key will no longer do emmet expansion. You can either run the command Emmet: Expand Abbreviation or make use of the expanded value in the suggestion list

Do share your feedback on how this works for you.

In the upcoming iterations, we will polish the new emmet behavior and eventually remove this setting and make the use of new emmet modules the default behavior.

Thanks!

[jmpp]

Thank you so much for this improvement !

[mikeott]

Thanks @ramya-rao-a - this was driving me nuts for a while.

[techsin]

I'm lost on what needs to be done. I get two suggestions as OP says. What can I do to disable or prioritize emmet autocomplete in scss,sass,css files, if possible also in html, ejs, jsx, jade

[ramya-rao-a]

@techsin

If you want to see emmet in the suggestion list set emmet.useNewEmmet to true and ensure editor.quickSuggestions is not false.

This will give you emmet in suggestion list for languages that are markup or stylesheet. Eg: html, jade, slim, xml, css, less, scss.

In the upcoming release (1.14), to get emmet in suggestion list for jsx, you need to set another setting emmet.showExpandedAbbreviation to be set to "always". This is to enable emmet in suggestion list for languages that are not pure markup or stylesheet. This may get noisy for you as emmet will keep trying to expand things even when you write js in jsx.

Read about emmet improvements in the previous release noteshttps://code.visualstudio.com/updates/v1_13#_emmet-abbreviation-expansion-in-suggestion-list as well as in the next release

[techsin]

@ramya-rao-a thanks, for me "not" setting useNewEmmet to true allowed Tab autocompletion to work, and setting off quickSuggestions only for css,scss,sass worked.

    "emmet.useNewEmmet": false,
    "[css]" : {
        "editor.quickSuggestions": {
            "other": false,
            "comments": false,
            "strings": false
        }
    },
    "[scss]" : {
        "editor.quickSuggestions": {
            "other": false,
            "comments": false,
            "strings": false
        }
    },
    "[sass]" : {
        "editor.quickSuggestions": {
            "other": false,
            "comments": false,
            "strings": false
        }
    }

[atmortensen]

@ramya-rao-a emmet.useNewEmmet was working great for awhile, but yesterday vscode updated and now it only works sometimes. When I type 'w' I expect the it to be 'width' but right now it's putting 'white-space' instead.

[ramya-rao-a]

@atmortensen The suggestion list is shared by the css completion provider and emmet. What you are seeing are suggestions from the css completion provider which trumps the emmet suggestion which is 9th in the list above. Which makes sense... alphabetically speaking.

This is by design.

If you want emmet specifically you can explicitly use the Emmet: Expand Abbreviation command (bind a keyboard shortcut for it , just don't use Tab)

[aeschli]

@ramya-rao-a It would be good if the emmet proposals are easier distinguishable. Maybe set the 'detail' to 'emmet' completion, or have your own icon (talk to @jrieken )

[ramya-rao-a]

@aeschli The detail is already "Emmet Abbreviation". But the detail only shows up on focus.

I'd love for emmet to have its own icon. But looking at what we have currently, all seem to have meaning in multiple languages. Emmet will be an exception. @jrieken ?

[jrieken]

Well, for a start you could use the snippet type. I believe it used to be like that in the beginning, unsure why it isn't anymore

[ramya-rao-a]

Because, then emmet would go to the bottom if anyone had editor.snippetSuggestions set to bottom

[jrieken]

Because, then emmet would go to the bottom if anyone had editor.snippetSuggestions set to bottom

Yeah, why not? The default is inline and since emmet is very eager to propose things having an easy way to demote its suggestions wouldn't be bad IMO. Also, note that that sorting only applies when no text has been typed yet. As soon as something is left of the cursor sorting is based on the matches/ranks and the initial sort in only used when equals otherwise

[ramya-rao-a]

As soon as something is left of the cursor sorting is based on the matches/ranks and the initial sort in only used when equals otherwise

In the below eg I have snippetSuggestions set to bottom. If what is said above is true, then the snippet "for" should have been the second item in the list

[jrieken]

If what is said above is true, then the snippet "for" should have been the second item in the list

Hm, that surprised me. The default is still inline, not bottom. We should revisit this

[levinit]

Keep original settings
"emmet.useNewEmmet": false

[ramya-rao-a]

@levinit Not for long... In the next update (1.15) we are switching to the new emmet model completely.

Is your reason for disabling the new emmet https://github.com/Microsoft/vscode/issues/1952#issuecomment-314792295 ?

[levinit]

@ramya-rao-a
If enabled the new emmet,"tab" colud not expand html tags （eg. div>p>span{test} ==> <div><p><span>test</span></p></div>)

I just found out that this issue is about the emmet problem in the CSS file。😂
I Generally use Emmet's abbreviation like "w10px"，then press "tab“ to expand it。I think that friend had set "editor.snippetSuggestions": "top"。

[ramya-rao-a]

@levinit With new emmet enabled don't you get the expanded value for div>p>span{test} as the first option in the suggestion list? That way pressing tab selects the selected item from the suggestion list.

[ramya-rao-a]

The new Emmet experience is now shipped with VS Code 1.15

Tab will no longer trigger Emmet.

Please read more on what else is new at Emmet 2.0

[atmortensen]

@ramya-rao-a Maybe I am not understanding fully how I should be using emmet with vscode. The only difference with 2.0 is that now I can't use tab to get the expected snippet. Right now if I type 'w' and press enter it puts 'white-space' instead of 'width' and if I type 'p' and press enter I get 'pad' instead of padding. I understand that it is sorted alphabetically, but I use width a lot more that white-space. Is there a way to put emmet snippets on top? I might just be doing something wrong. Thanks!

[ramya-rao-a]

@atmortensen You arent doing anything wrong. The reason for what you are saying has been already discussed in https://github.com/Microsoft/vscode/issues/1952#issuecomment-314845248

We have had feedback on wanting emmet to be triggered on tab, so we are bringing it back in the July Recovery Build of 1.15.1 which will be out in the next few days. Until then you can use the latest Insiders (https://code.visualstudio.com/insiders) and set emmet.triggerExpansionOnTab to true

Am using https://github.com/Microsoft/vscode/issues/32346 to track keeping emmet suggestions on top if we go down the route of treating them as snippets

[borisowsky]

Interesting, but for some reason new emmet dosent work in .sass files (indented syntax) at all @ Windows 10 - VS 1.15.0

[ramya-rao-a]

@borisowsky That's been fixed in the latest Insiders (https://code.visualstudio.com/insiders). The fix will be included in the upcoming July Recovery Build (1.15.1) which will be out in 2 days or so