VS Code中HTML属性内使用与触发代码片段的相关问题

当然可以在HTML属性内部触发代码片段啦！我之前也遇到过和你一样的困惑——明明片段在HTML标签里正常工作，一到属性值里就没反应了，后来折腾了一番才找到解决办法，主要是代码片段的作用域配置和编辑器的提示设置这两个关键点：

• 第一步：调整代码片段的scope范围
  默认的HTML代码片段作用域通常只设置了html，但属性值的上下文属于html.attribute.value这个细分作用域。你需要把片段的作用域扩展，同时包含这两个值。比如你的片段原来的配置是这样的：

  "My HTML Snippet": {
    "scope": "html",
    "prefix": "mysnip",
    "body": ["..."],
    "description": "..."
  }
  

  把它改成：

  "My HTML Snippet": {
    "scope": "html, html.attribute.value",
    "prefix": "mysnip",
    "body": ["..."],
    "description": "..."
  }
  

  这样片段就能在属性值的上下文里被识别到了。

• 第二步：检查编辑器的自动提示设置
  VS Code有个默认设置可能会在属性内阻止代码片段的自动提示，你可以通过修改设置来开启：
  打开设置（快捷键Ctrl+,或Cmd+,），搜索editor.suggest.snippetsPreventQuickSuggestions，如果它是true的话，改成false。要是你只想针对HTML文件生效，不想全局修改，可以用语言特定设置：

  "[html]": {
    "editor.suggest.snippetsPreventQuickSuggestions": false
  }
  

• 小技巧：手动触发提示
  有时候自动提示可能不会立刻弹出，尤其是在属性值里，这时候可以按Ctrl+Space（Windows/Linux）或者Cmd+Space（Mac）手动唤起代码提示，就能看到你的片段了。

另外还要注意，如果你的VS Code版本比较旧，可能对属性内的上下文识别支持不够好，升级到最新版本应该能解决一些兼容性问题。

举个实际的例子，我做了一个在src属性里快速插入静态资源路径的片段，配置好后在<img src="|">的光标位置输入前缀，就能直接生成路径，非常方便！

备注：内容来源于stack exchange，提问作者ling