对 VSCode 中不一致的 Emmet 结果感到沮丧 [英] Frustration with inconsistent Emmet results in VSCode

问题描述

我大约在 6 或 7 个月前从 ST3 转向 VSCode，总体而言我很喜欢它.但我真的在为 Emmet/VSCode 如何扩展文本的不一致而苦苦挣扎......

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 应该给我 float:left，但我得到的是 flex: gif
• m:a 应该给我 margin:auto - 尽管从 ST3 开始我一直使用 m- 来做这个.但是在 VScode 中:我得到 max-block-size: gif
• ttu 应该给我 text-transform:uppercase，但我得到的是 text-underline-position:
• p20-40 应该给我 padding: 20px 40px 但在这种情况下，没有任何反应 - 根本无法识别它
• w100p 应该给我 width:100% 但同样，它甚至无法识别 <-- 可能是最烦人的一个，因为我经常使用它.
• 甚至 HTML 经常出错:.div-class 变成 .div-class<?php <-- 不知道这里发生了什么......gif

• 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

几乎好像VSCode有自己内置的Emmet，总是和实际 Emmet冲突.我会第一个承认它可能是我的 settings.json 中的一个冲突选项，所以这是我的设置文件:

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.

其他信息:

• VSCode 版本 1.15.1 (1.15.1)
• 扩展

如果没有遇到这些问题的人可以分享他们的设置文件，以便我可以解决我的挫败感并继续热爱 VSCode，我会真的感激吗?

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?

谢谢:)

推荐答案

那是因为 Emmet 干扰了自动完成.尝试键入这些命令中的任何一个并从命令面板执行 Emmet: Expand Abbreviation.

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

• 您可以重新映射 emmet 命令的键绑定 editor.emmet.action.expandAbbreviation

您可以禁用 css 的自动完成功能(在需要时显示自动完成Trigger Suggest Ctrl+Space)

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

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

从版本 2017 年 8 月 16 日 开始，您可以移动 emmet片段在顶部并且仍然具有自动完成功能:

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

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

这篇关于对 VSCode 中不一致的 Emmet 结果感到沮丧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！