大家好，我是一名前端开发者，也是一个长期使用 WebStorm 进行开发的开发者。
最近在多个项目中都使用到了国际化方案，很自然地选择了 vue-i18n。
功能上它完全没问题，但在实际开发过程中，却逐渐暴露出一个非常影响效率的痛点：
代码里只能看到 i18n key，而不是对应的文案内容。
更糟的是，这些 key 还是通过 du18n 自动翻译生成的，命名并不直观，时间一长，我对这些 key 几乎完全没有“语义记忆”。每次回到模板或 JS 代码中，只能对着一串 $t('vin_success_tip') 发愣，根本不知道页面最终展示的是什么。
在 VS Code 中，其实已经有插件可以在 key 后面直接展示对应的中文文案，开发体验非常友好。
于是我开始在 WebStorm 插件市场里搜索各种和 i18n 相关的插件，最终找到了一个看起来“勉强符合需求”的插件 —— i18n Ally。
但实际使用下来问题不少：
-
显示不稳定
-
有时能正常展示，有时又全部消失
-
且作者已经 停止维护
在多次被“突然失效”的体验劝退之后，我逐渐萌生了一个想法：
既然找不到稳定好用的插件，那我能不能自己写一个？
于是，在 AI 的“鼓励 + 忽悠”下，我开始了第一次 WebStorm 插件开发之旅，也由此诞生了这个项目。
一开始，其实我对 JetBrains 插件开发几乎是完全陌生的。
再加上我本身只是做前端开发，对 Kotlin 这门语言也毫无基础，可以说是双重劝退开局。
实际开发过程中，遇到的坑可以用一句话形容：又多又深，而且还不按套路来。
在 B 站上搜索了一圈，发现关于 JetBrains 插件开发的系统性教程少得可怜。没办法，只能先下载 IntelliJ IDEA，按照官方模板创建了人生中的第一个插件项目。
接下来，基本就进入了「AI 驱动开发」模式。
在不断和 AI 对话、试错的过程中，我逐渐锁定了一个关键 API ——
codeInsight.inlayProvider
这个 API 的能力，正好可以满足我的核心需求：
在代码中为特定位置动态插入提示信息。
实现的过程出乎意料地顺利。
很快，我就完成了 JavaScript / TypeScript 文件中的 i18n key 提示展示。
那一刻，我内心只有一个想法：
So easy ～
原来 JetBrains 插件开发也不过如此 😄
然而事实证明，这只是第一个坑前的错觉。
当我满怀信心地切换到 .vue 文件中，准备享受成果时，却发现 ——
什么都没有显示。
一开始我还以为是代码逻辑问题，反复检查了好几遍。
直到再次去问 AI，才得到一个让我意识到问题根源的答案：
Vue 文件需要单独的 Language 支持。
于是我又开始按照 AI 的提示，为插件添加对 Vue Language 的支持。
结果下一步直接迎面而来的是 —— 满屏报红。
接下来，我几乎进入了 ChatGPT、豆包、DeepSeek 的“循环忽悠”模式。真的是循环忽悠。
在不同模型的建议下，我来回安装、切换了 IDEA 2023 / 2024 / 2025 多个版本，试图找出问题的根源。
最终得到的结论大致是：推荐使用Inlay Provider 的 Factory版本 我当时心想 Factory这个API是不是可以支持任何语言呢? 我也问AI是不是用Factory就支持.vue了, 它又忽悠我说可以,弄了很久, 也是一堆报错, 忽悠, 说实话，那一刻我是真的有点想放弃了。
冷静下来之后，我换了一个思路：
不再只问 AI，而是去看看“别人是怎么做的”。
于是我打开了 JetBrains 官方的插件 API Explorer，直接搜索所有使用了
com.intellij.codeInsight.inlayProvider 的插件：
👉 plugins.jetbrains.com/intellij-pl…
在翻看这些插件的实现时，一个细节引起了我的注意：
有些插件在声明中写的是：
Language="R"
R可以写, 是不是vue也能写呢?
带着这个疑问，我顺着插件信息找到了其中一位作者，
抱着试一试的心态，给他发了一封邮件，虚心请教这个问题。
让我非常惊喜的是 ——
他很快就回复了我。
他的回答点醒了我一个之前完全忽略的关键点：
Language 并不是随便写的字符串，必须先在 IDE 中注册。
而这个 language 的值，本身是有讲究的。
我最开始直接写的是：
language="vue"
结果当然是不行。
后来才意识到：
Vue 并不是一个内置语言，而是由 Vue 插件提供的 Language 支持。
顺着这个思路，我直接去本地翻了 Vue 插件的 jar 包，在 plugin.xml 里找到了它真正的插件 ID：
org.jetbrains.plugins.vue
在插件中完成对应的 Language 注册之后，再使用：
language="vue"
这一次 ——
不再报红了。
运行插件，打开 .vue 文件，i18n key 后面终于出现了熟悉的中文提示。
那一刻，说实话，
真的非常、非常开心。在这一刻我的插件核心已经完成了,
用了两天, 我觉得这个插件应该别的webstorm开发者肯定也需要的, 于是我就把这个插件把扩展的功能完善了一下, 接着发布到 Jetbrains Marketplace了
断断续续历经了4天, 终于完成了.
最后~~如果你也是前端开发者, 也刚好项目用到国际化, 也刚好使用webstorm, 也刚好看到我的文章, 那就尝试使用这个插件把, 能帮助到其他人我也很开心
