如何在 VSCode 中添加自定义 emmet 片段？答案

【问题标题】：How do I add custom emmet snippets in VSCode?如何在 VSCode 中添加自定义 emmet 片段？
【发布时间】：2021-04-01 06:51:15
【问题描述】：

根据october 2020 changelog，可以为 VSCode 添加自定义 sn-ps。假设我有位于workspace\configs\emmet 的snippets.json，其内容如下：

{
  "html": {
    "snippets": {
      "btn:b|button:button|button:b": "button[type={button}] ${1}"
    }
  }
}

我想以.code-workpace文件操作系统无关的方式链接它的路径，所以使用一堆VSCode variables：

{
  "settings": {
    "emmet.extensionsPath": "${workspaceFolder}${pathSeparator}configs${pathSeparator}emmet"
  }
}

但是这个新的 sn-p 并没有出现在建议中。什么给了？

【问题讨论】：

emmet.extensionsPath需要像/d:/dir1/dir2一样使用unix版本的uri
${workspaceFolder} 指的是当前文件的工作区文件夹而不是.code-workpace 文件
要求完整路径很烦人，因为我希望将可共享的 sn-ps 限定为特定项目。
我认为设置属性中不允许使用变量
您有没有发现项目特定的 sn-ps 是否可行？

标签： html visual-studio-code jsx vscode-settings emmet

【解决方案1】：

在 VS 代码菜单中，点击 File -> Preferences -> User Snippets，

然后像这样添加sn-p：

"<snippets name>": {
        "scope":  "< e.g javascript,typescript,vue,coffeescript,typescriptreact>",
        "prefix": "<your prefix>",
        "body": [
                "<snippet body"
        ]
},

【讨论】：

emmet sn-ps 的处理方式与常规 sn-ps 不同。
即使它可以工作，这个想法背后的全部意义在于拥有特定于项目的 sn-ps，因此直接编辑 VSCode 设置是不行的。