首先,不得不说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文件,试试吧。


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


你远道而来这人世间,想必也是因为热爱吧 ||