Nuxt / Vue 2 + Typescript – VS Code 道具自动完成

Question

我来自 React，最近开始从事 Nuxt 项目。不幸的是，我无法在 VSCode 中设置 props 的自动完成/建议（Vetur 已安装）。让我向您展示一个名为“alignment”的 prop 的示例：

组分A：

<template>
  <div :class="styles[alignment]">
    /* Some Content */
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import styles from "./styles.module.scss?module";

type AlignmentOptions = "left" | "right" | "center";

export default Vue.extend({
  props: {
    alignment: {
      type: String as PropType<AlignmentOptions>,
      default: "left"
    }
  },
  data() {
    return {
      styles
    }
  }
});
</script>

组件B：

<template>
  <ComponentA /> // I expected VSCode to give me suggestions about the props I can pass to ComponentA here but nothing is showing up unfortunately
</template>

<script lang="ts">
import Vue from "vue";
import ComponentA from "@/components/ComponentA"

export default Vue.extend({
  components: {
    ComponentA
  }
});
</script>

这是我想要实现的目标的另一个屏幕截图：

VSCode Props 自动完成

有什么建议么？提前致谢！

Answer 1

从 WebStorm 切换到 VS Code 时，我遇到了同样的问题。props 自动完成是一项智能感知功能，经过一番研究，我设法在 VS Code 上找到了解决方案。

安装vetur并按照https://github.com/CyCraft/vue-intellisense#readmevue-intellisense上的说明进行操作