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

Question

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

当我在Vue模板中开始输入“v”时，会显示建议（例如：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>

尽管这对我来说是个很好的练习机会，但它也可能成为一项负担。 有什么扩展、选项或命令可以设置以改善开发者的体验吗？

- eomer

Answer 1

自2019年2月以来，Vetur支持实验性模板插值，可以在HTML模板中使用自动完成和“诊断/悬停/定义/引用”功能。

在您的VS Code设置中启用Vetur›实验：模板插值服务选项即可开启此功能。

- Franey

Answer 2

在 Visual Studio Code 上添加 Vetur 扩展，除了自动完成 Vue 代码之外，它还包含许多其他不错的功能。

- Abdelillah Aissani

---

对我没用 我安装了hallowtree的Vue 2代码片段并禁用了它的vetur，但什么也没有发生，甚至对于vue也没有建议。 - eomer

@eomer 我目前正在使用它，它运行良好，也许是你的设置出了问题。 - Abdelillah Aissani

对我也不起作用。甚至import也无法识别。很奇怪。 卸载VSCode并重新安装解决了问题。 - Dirk Schiller

所有Vue扩展对我都不起作用（Vue2+Vuetify）。 - michaelT