Frustration with inconsistent Emmet results in VSCode

Question

I moved to VSCode from ST3 about 6 or 7 months ago now and overall am loving it. But I'm really struggling with inconsistencies in how Emmet/VSCode expands text...

For example: (these examples are as per the cheat sheet)

• fl should give me float:left, but instead i get flex: gif
• m:a should give me margin:auto - although since ST3 i've always used m- for this. However in VScode: I get max-block-size: gif
• ttu should give me text-transform:uppercase, but instead I get text-underline-position:
• p20-40 should give me padding: 20px 40px but in this case, nothing happens - doesn't recoginize it at all
• w100p should give me width:100% but again, doesn't even recognize it <-- probably the most annoying one because I use this so often.
• and even HTML borks out quite often: .div-class becomes .div-class<?php <-- no idea whats going on here... gif

It almost seems that VSCode has its own built-in Emmet, which is always conflicting with actual Emmet. I'll be the first to admit that it might be a conflicting option in my settings.json, so here is my settings file:

{
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.wordBasedSuggestions": false,
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.tabCompletion": true,
  "editor.renderWhitespace": "boundary",
  "editor.snippetSuggestions": "top",
  "editor.occurrencesHighlight": false,
  "editor.selectionHighlight": false,
  "editor.renderIndentGuides": true,
  "editor.autoIndent": true,

  "php.suggest.basic": false,
  "php.validate.executablePath": "/usr/local/php5/bin/php",

  "workbench.colorTheme": "Bimbo Theme",
  "workbench.iconTheme": "vs-seti",
  "workbench.startupEditor": "none",
  "workbench.editor.tabCloseButton": "left",
  "workbench.commandPalette.preserveInput": true,
  "workbench.tips.enabled": false,

  "window.zoomLevel": 0,
  "git.enableSmartCommit": true
}

I have removed settings relating to font sizes and themes etc.

Other Info:

• VSCode Version 1.15.1 (1.15.1)
• Extensions

Would really appreciate it if someone who isn't experiencing these issues could share their settings file so I can fix my frustration and carry on loving VSCode?

Thanks :)

Answer 1

That's because Emmet is interfering with autocomplete. Try typing any of these commands and execute from command palette Emmet: Expand Abbreviation.

• You can remap keybinding for emmet command editor.emmet.action.expandAbbreviation

• You can disable autocomplete for css (to show autocomplete when needed Trigger Suggest Ctrl+Space)

"[css]": {
    "editor.quickSuggestions": {
        "other": false,
        "comments": false,
        "strings": false
    }
}

From version 1.16 August 2017 you can move emmet snippets on top and still have autocomplete:

"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"