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

Posted 2023-02-22

【中文标题】Nuxt / Vue 2 + Typescript – VS Code 道具自动完成

【英文标题】：Nuxt / Vue 2 + Typescript – VS Code props Autocomplete

【发布时间】：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

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

【参考方案1】：

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

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