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

Posted 2023-02-21

【中文标题】如何在 VSCode 中添加自定义 emmet 片段？

【英文标题】：How do I add custom emmet snippets in VSCode?

【发布时间】：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$pathSeparatorconfigs$pathSeparatoremmet"
  

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

【问题讨论】：

emmet.extensionsPath需要像/d:/dir1/dir2一样使用unix版本的uri

$workspaceFolder 指的是当前文件的工作区文件夹而不是.code-workpace 文件

要求完整路径很烦人，因为我希望将可共享的 sn-ps 限定为特定项目。

我认为设置属性中不允许使用变量

您有没有发现项目特定的 sn-ps 是否可行？

【参考方案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 设置是不行的。