VS Code 中的 Emmet JS 片段答案

【问题标题】：Emmet JS snippets in VS CodeVS Code 中的 Emmet JS 片段
【发布时间】：2018-08-06 13:26:51
【问题描述】：

有没有人成功让 Emmet JS sn-ps 在 VS Code 甚至是 Sublime 中工作？

https://stackoverflow.com/a/16943996/2012407 的解决方案对我不起作用。

这些是我的设置：

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "plaintext": "html"
},

这是我的 sn-ps.json：

{
    "javascript": {
        "abbreviations": {
            "cl": "console.log",
            "va": "var"
        },
        "snippets": {
            "cl": "console.log",
            "va": "var"
        }
    },
    "css": {
        "snippets": {
            "cb": "color: black",
            "bsd": "border: 1px solid ${1:red}"
        }
    }
}

CSS、SCSS、HTML 和所有其他方面都没有问题 - 只有 JS。我试过 abbreviations 或 snippets，但 Emmet 扩展在我写的内容周围放置了 HTML 标签：cl 在 Javascript 和 javascriptreact 文件中变为 <cl>。

我还在该语言的 sn-ps 定义中尝试了js 和javascriptreact，但没有成功。

【问题讨论】：

标签： javascript visual-studio-code emmet

【解决方案1】：

无需在 Emmet 中添加 JS sn-ps：Emmet 2.0 的新概念（已在 VS Code 中提供；v2.0 处于 beta 阶段，尚未公开发布）用作自动完成提供程序，因此您可以简单地使用原生 VS Code sn-ps 代替

【讨论】：

我在发行说明中很快就看到了这个功能。我很想知道 emmet 方式，所以我也可以在 Sublime 中使用。您能否简要地指导我们使用 VS 代码内置的方式，如何设置它？所以这个问题将得到回答。干杯！
您也应该在 Sublime Text 中使用相同的原生 sn-ps 方法。使用 Emmet 作为非 HTML 和非 CSS 语法的 sn-ps 提供程序意味着您必须禁用编辑器为给定语法提供的 all 本机 sn-ps 并改用 Emmet。另外，ST 目前使用的是不使用自动完成功能的旧 Emmet 版本，因此 VSCode 和 ST 目前普遍不兼容

【解决方案2】：

所以我在这里举一个内置的 VS Code sn-ps 的例子，这仍然不是我最喜欢的。

使用 cmd+shift+p 打开命令提示符并输入 user snippets。那里已经有一个例子。取消注释，保存，输入前缀即可立即使用。

我还必须创建同一个名为 javascriptreact.json 的 sn-p 文件，它才能在我的大多数 JS 文件中工作 - Javascript React (babel)

例如：

{
    "Test": {
        "prefix": "ts",
        "body": [
            "console.log('test')",
            "$1"
        ],
        "description": "Prints test"
    }
}

现在我将 Emmet 映射到 ctrl+e 并且将内置的 sn-ps 限制为智能感知并不是很好。我想要一个像 ctrl+e 这样的键绑定，我是 Emmet 的忠实粉丝。

如果有人知道的话，我仍然希望使用相同的键绑定与 Emmet 一起工作。

【讨论】：

【解决方案3】：

这篇文章解决了我的问题

https://medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

【讨论】：