What would it take to enable intellisense in a vue component's template html?

问题

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.

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>

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...¯\_(ツ)_/¯

回答1:

maybe you should try webstorm,and install a typeScript plugin to do this.

回答2:

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

1. Syntax-highlighting

2. Snippet

3. Formatting
4. Linting/ Error Checking
5. Auto Completion
6. Debugging

来源：https://stackoverflow.com/questions/48529466/what-would-it-take-to-enable-intellisense-in-a-vue-components-template-html