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

【问题标题】：Nuxt / Vue 2 + Typescript – VS Code props AutocompleteNuxt / Vue 2 + Typescript – VS Code 道具自动完成
【发布时间】：2021-06-29 08:10:25
【问题描述】：

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

组件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 Autocompletion

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

【问题讨论】：

标签： typescript vue.js visual-studio-code nuxt.js

【解决方案1】：

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

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

【讨论】：