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

Posted

技术标签:

【中文标题】如何在 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\emmetsnippets.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 设置是不行的。

以上是关于如何在 VSCode 中添加自定义 emmet 片段?的主要内容,如果未能解决你的问题,请参考以下文章

VS Code中自定义Emmet代码片段

vscode自定义Tab填充提高代码编写效率

vscode中tab键无法触发emmet快捷生成

配置vscode使它能够在自定义扩展名当中支持emment语法

如何将 ESLnt 自定义规则目录添加到 VSCode

VSCode自定义代码片段——.vue文件的模板