在vue组件的模板html中启用intellisense需要什么？

Question

我对Vue比较陌生，但精通Typescript和Angular。我目前使用vue docs规定的vue-class-component和vue-property-decorator库来打字稿路线。

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

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>

是否有插件或方法可以在输入此模板时（在上面^的{​​{1}}位置）提供可以提供自动完成选项的插件？也许一个插件可以读取链接相应组件类的模板顶部的特殊注释...¯\ _（ツ）_ /¯

Answer 1

也许您应该尝试webstorm，并安装一个typeScript插件来执行此操作。

Answer 2

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

1. 语法突出显示

2. 代码段

3. 格式化
4. 整理/错误检查
5. 自动完成
6. 调试