在 vue 组件的模板 html 中启用智能感知需要什么？

Question

我对 Vue 比较陌生，但精通 Typescript 和 Angular。我目前正在使用 vue 文档规定的 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>

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

Answer 1

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

1. 语法高亮

2. 片段

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

Answer 2

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