如何在 Visual Studio Code 中自动完成 Vue 模板

Question

我开始使用 Visual Studio Code 学习 Vue。我下载了一个添加 Vue 代码片段的扩展程序（hallowtree 的 Vue 2 Snippets）。

当我开始键入"v"在Vue公司模板，建议显示（v-on，v-bind，等），但后来，显示任何建议或该功能。

在下面的示例模板中，v-on建议，但之后，没有建议"click"或任何其他事件。此外，在以下之后没有任何建议"@"：

<button v-on:click="changeLink">Click to change Link</button>
<button @click="changeLink">Click to change Link</button>

在这个例子中，v-bind建议，但之后，没有建议"href"或任何其他 HTML 属性/属性：

<a v-bind:href="link">Link</a> 
<a :href="link">Link</a>

虽然对我修炼有好处，但会成为一种负担。是否可以设置任何扩展、选项或命令来改善开发人员体验？

Answer 1

自 2019 年 2 月以来，Vetur在 HTML 模板中对自动完成和“诊断/悬停/定义/引用”进行了实验性模板插值。

Vetur › Experimental: Template Interpolation Service在 VS Code 设置中启用该选项以打开此功能。

Answer 2

添加Vetur扩展，visual-studio-code除了自动完成 vue 代码之外，它还包括许多其他不错的功能