如何在VS Code中让HTML Snippets支持更多文件类型(.vue,.jsx)？

首先，不得不说VS Code是一款非常好的编辑器，其丰富的扩展插件让开发者拥有更多的选择。

作为前端开发，我们在写代码的时候，繁琐的标签对往往是我们的噩梦。但是越来越多的编辑器会为我们自动补全，大大减少了搬砖的痛苦程度。其中，在VS Code里面有一个大名鼎鼎的HTML自动补全插件，就是HTML Snippets。

但是，我们在写vue或者react的时候，自动补全的功能并不会启用。这样就头大了，终于在重重搜索之后找到了作者的回复：

• 我确实删除了其他语言，因为其他用户抱怨说扩展名妨碍了他们在使用其他语言（例如php和js）进行编程时的使用，这很有意义。我实际上在想应该做一个完整的扩展，可以自定义并添加其他功能。

• 由于VSCode已清除其行为并开始比以前更好地处理扩展，因此我认为个人定制个性化扩展以满足他们的需求是合理的。

我们可以看到，作者的意思是不想把扩展设置为全局，避免不断提示和补全会影响其他语言的开发者。

还好，作者积极提供了解决方案，我在这里整理了一下

首先我们需要找到VS Code的扩展文件夹和扩展文件

以下是不同平台，其文件夹的位置

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

然后，我们进入文件夹，找到扩展名为abusaidm.html-snippets-x.x.x的文件夹，打开后，我们可以找到package.json这个文件。这个就是我们要找的配置文件

为配置文件添加我们需要支持的文件类型

打开package.json文件，我们找到snippets部分，发现作者只添加了HTML类型，我们可以仿照写出我们要支持的类型

"contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            },
            {
                "language": "vue",
                "path": "./snippets/snippets.json"
            },
            {
                "language": "jsx",
                "path": "./snippets/snippets.json"
            }
        ]
    },

重启VS Code

好了，可以新建一个vue文件，试试吧。

---

最后，在这里贴出作者的回复连接，点击这里。