VSCode Emmet自动补全CSS/SCSS错误 相关设置失效如何解决

两个问题都是VSCode近期内置服务更新、配置项覆盖不全导致的，和安装扩展、更改主题没有关系：

• SCSS属性补全匹配错误：VSCode在后续版本更新内置CSS/SCSS语言服务时，调高了CSS逻辑属性的补全排序权重，把margin-block、widows这类低频属性的排序放到了margin-bottom、width这类高频传统属性前面；同时默认补全排序不再优先参考用户的历史使用习惯，如果你之前依赖Emmet做缩写补全，更新后Emmet的补全项会被内置语言服务的补全项挤到Tab选中顺位之后，按Tab就会优先选中排序靠前的错误匹配项。
• 关闭自动加分号后仍自动插入：控制CSS补全自动加分号的配置有两个独立入口，大概率只关闭了内置CSS语言服务的分号插入开关，没关Emmet补全的分号自动追加配置，部分第三方SCSS补全扩展也会自带独立的分号插入规则，不受内置开关控制。

按顺序调整配置即可解决，不需要重装编辑器或者扩展：

• 修复补全排序错误
  1. 打开设置面板，搜索editor.snippetSuggestions，将值修改为top，强制让Emmet、自定义代码片段的补全项排在所有普通补全项前面，不会被内置服务的属性联想挤下去。
  2. 按Ctrl+Shift+P（macOS是Cmd+Shift+P），搜索「打开用户设置(JSON)」，在配置文件中加入以下规则，让CSS/SCSS场景下的补全优先匹配对应前缀下的历史使用记录，Tab键只触发代码片段/Emmet补全，不会误选普通联想项：

  "[scss]": {
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "editor.tabCompletion": "onlySnippets"
  },
  "[css]": {
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "editor.tabCompletion": "onlySnippets"
  }
  

  配置生效后，只要你之前输入wid选过一次width、输入margin-bo选过一次margin-bottom，后续相同前缀下这两个选项会永远排在补全列表第一位，按Tab就不会再匹配到错误属性。
• 修复自动插入分号问题
  1. 先确认css.completion.completePropertyWithSemicolon配置项已经是关闭状态，这是内置CSS语言服务的分号插入开关。
  2. 搜索emmet.preferences配置，在Emmet的偏好设置里将CSS属性结尾的默认值从;改为空；如果直接在JSON里配置，加入以下内容即可：

  "emmet.preferences": {
    "css.propertyEnd": ""
  }
  

  3. 如果你安装了第三方SCSS补全类扩展，去对应扩展的设置页找到自动追加分号的开关关闭即可，第三方扩展的补全逻辑独立于内置服务，不会跟随内置配置生效。

内容的提问来源于stack exchange，提问作者Donnie Berry