在 vue 组件的模板 html 中启用智能感知需要什么? [英] What would it take to enable intellisense in a vue component's template html?

问题描述

我对 Vue 比较陌生，但精通 Typescript 和 Angular.我目前正在使用 vue-class-component 和 vue-property-decorator vue 文档规定的库.

I am relatively new to Vue, but well-versed in Typescript and Angular. I am currently going the typescript route, using the vue-class-component and vue-property-decorator libraries as prescribed by the vue docs.

我使用 VSCode 作为我的编辑器，并且根据标题，想知道是否有任何工具/插件/IDE 允许在 html 模板中自动完成/智能感知.比如说我的 .ts 文件是:

I use VSCode as my editor, and, as per the title, was wondering if there are any tools/plugins/IDEs out there which allow auto-complete/intellisense in the html template. Say for example my .ts file is:

hi.ts:

import { Component, Vue, Prop } from 'vue-property-decorator';

interface IInfo {
  name: string;
  age: number;
}

@Component({
  template: require('./hi.html')
})
export default HiComponent extends Vue {
  info: IInfo = { name: 'brosef', age: 30 };
}

hi.html:

<h1>name: {{ info.^ }}</h1>
<h2>age: {{ info.^ }}</h2>

是否有插件，或编写一个可以在键入此模板时提供自动完成选项的插件(在上述 hi.html 中的 ^ 位置)?也许一个插件可以读取链接相应组件类的模板顶部的特殊注释...¯\_(ツ)_/¯

Is there a plugin, or way to write one that could provide auto-completion options while typing this template (at the ^ positions in hi.html above)? Perhaps a plugin that could read a special comment at the top of a template that linked the corresponding component class...¯\_(ツ)_/¯

推荐答案

使用 Vuetr VSC 扩展，因为它涉及 vue 文件中的所有以下功能 -

Use Vuetr VSC extension as it involves all the following feature in vue file -

1. 语法高亮

1. Syntax-highlighting

片段

这篇关于在 vue 组件的模板 html 中启用智能感知需要什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！