Vue3 Composition API项目中，如何在WebStorm跳转至父组件？

方案1：添加空的传统script块（最兼容） #

在使用<script setup>的组件末尾，添加一个不含逻辑的传统script块并导出空对象，IDE会识别这个export default作为组件的导出入口，支持Command-Click跳转：

<script setup lang="ts">
// 你的Composition API业务代码
const resetPassword = () => { /* ... */ }
</script>

<script lang="ts">
// 仅用于IDE识别，不影响组件运行
export default {}
</script>

<template>
  <!-- 模板内容 -->
</template>

现在点击这个export default就能直接跳转到所有引用该组件的父组件，或查看引用列表。

方案2：利用WebStorm的内置快捷操作（无需修改代码） #

• 直接在编辑器顶部的组件文件名标签上，使用Command+Click，即可快速查看所有引用该组件的位置，点击对应条目跳转。
• 或者在组件的<template>标签上右键，选择「Find Usages」（对应快捷键Option+F7，无需切换面板），结果会在编辑器侧边弹出，点击跳转后按Escape即可关闭面板。

方案3：升级WebStorm及Vue插件 #

确保你的WebStorm版本在2022.3以上，Vue插件更新到最新版——JetBrains对<script setup>的模块引用识别已做优化，现在可以直接在<script setup>标签本身使用Command+Click，触发跳转或查看引用列表。

内容的提问来源于stack exchange，提问作者scipilot