如何在PhpStorm中启用@@create事件的跳转导航功能？

在测试应用的App.vue中引入了EntryEditor组件并绑定了@@create事件，但在PhpStorm中尝试查找该事件的定义时，无法定位到对应的声明位置。

相关代码 #

App.vue #

<script lang="ts" setup>
import EntryEditor from "./components/EntryEditor.vue";
import { reactive } from "vue";
import type Entry from "@/types/Entry";
const doSomething = (entry: Entry) => {
  console.log(entry);
};
</script>

<template>
<main class="container m-auto p-10">
<TheHeader />
<EntryEditor @@create="doSomething" />
</main>
</template>

EntryEditor.vue #

<script lang="ts" setup>
import { ref, computed } from "vue";
import type Entry from "@/types/Entry";

const text = ref("");
const emoji = ref<Emoji | null>(null);
const maxChars = 280;

defineEmits<{
(e: "@create", entry: Entry): void;
}>();
</script>

<template>
<form
class="entry-form"
@submit.prevent="
  $emit('@create', {
    body: text,
    emoji,
    createdAt: new Date(),
    userId: 1,
    id: Math.random(),
  })
"
>
<EmojiField v-model="emoji" />
<div class="entry-form-footer">
  <span>{{ charCount }} / {{ maxChars }}</span>
  <button>
    Remember
    <ArrowCircleRight width="20" />
  </button>
</div>
</form>
</template>

解决方案 #

1. 确保Vue.js插件及导航配置正确 #

• 打开PhpStorm设置（Windows/Linux：File > Settings；Mac：PhpStorm > Settings）
• 进入Plugins面板，搜索Vue.js，确认插件已启用（未安装则点击安装并重启IDE）
• 进入Languages & Frameworks > JavaScript > Vue.js：
  • 勾选Enable Vue.js support
  • 在Navigation区域，确保Go to declaration for components, directives, events相关选项处于开启状态

2. 修正事件名的规范写法（关键） #

Vue的事件名定义不需要带@符号，当前带@的写法不符合规范，会导致IDE无法正确解析：

• 在EntryEditor.vue的defineEmits中，将事件名改为create：

  defineEmits<{
  (e: "create", entry: Entry): void;
  }>();
  

• 模板中的$emit调用同步修改：

  $emit('create', {
    body: text,
    emoji,
    createdAt: new Date(),
    userId: 1,
    id: Math.random(),
  })
  

• 父组件App.vue中绑定事件改为@create="doSomething"（去掉一个@）

完成以上操作后，PhpStorm就能正确识别事件定义，支持跳转导航功能。

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