公眾號「古時的風箏」，專注于后端技術，尤其是 Java 及周邊生態。

個人博客：

大家好，我是風箏

前些天做了一(yi)款(kuan)支持 Jetbrains 大(da)部分(fen) IDE 的摸魚插(cha)件- ，沒想到出乎意料的沒什么人用，當初說 VsCode 里面(mian)的養寵物的插(cha)件時，一(yi)大(da)堆人問 IDEA 里有(you)(you)沒有(you)(you)、PyCharm 里有(you)(you)沒有(you)(you)，那些人呢，上哪兒去了。

沒人用(yong)就沒人用(yong)吧，反(fan)正也(ye)不(bu)是什么正經東西。

今天(tian)就(jiu)來說說這個(ge)插件是(shi)怎(zen)么(me)開發的。源(yuan)碼(ma)已(yi)經放到 GitHub 上了

背景說明

之前是(shi)看(kan)到 VsCode 上有一(yi)個小插件，叫做 VsCode Pets ，就是(shi)在左(zuo)下角小窗(chuang)口養寵(chong)物的一(yi)個插件。

感覺很有(you)意思，就發了一篇(pian)文章推薦(jian)了一下，沒(mei)(mei)(mei)想到感興趣(qu)的(de)人(ren)特別多，就出(chu)現了開(kai)頭說的(de)那個(ge)場景，有(you)人(ren)沒(mei)(mei)(mei) IDEA 版的(de)有(you)沒(mei)(mei)(mei)有(you)、PyCharm 版的(de)有(you)沒(mei)(mei)(mei)有(you)。

我一(yi)(yi)看(kan)，呦呵，需求(qiu)還挺廣(guang)泛，一(yi)(yi)搜(sou) Jetbrains 插件商店，有(you)(you)是(shi)有(you)(you)一(yi)(yi)個，但(dan)是(shi)稍微有(you)(you)些(xie)簡陋。

一看這(zhe)功(gong)能(neng)，也不是很(hen)復雜，我(wo)就說(shuo)做一個吧。正好 VsCode Pets 是開源的(de)，代(dai)碼雖然不能(neng)復用(yong)，但是里(li)面的(de)素材可(ke)以直(zhi)接拿過來(lai)用(yong)。

開發過程

首先說，Jetbrains 插(cha)件開發我是(shi)不會的，即便現在開發完了(le)，也只是(shi)了(le)解了(le)原理(li)。

Jetbrains 插件開發有兩種(zhong)方(fang)(fang)式(shi)(shi)，一(yi)種(zhong)是(shi)用 Kotlin，另外一(yi)種(zhong)使用 Java，Kotlin 是(shi)目前推(tui)薦的(de)方(fang)(fang)式(shi)(shi)，但是(shi)很顯然，我是(shi)不會(hui)的(de)，所以(yi)就選擇(ze)使用 Java 了。

在 IDEA 中，新建項目的(de)時候(hou)就(jiu)有一個是 IDE Plugin 類型的(de)，專門用來做(zuo)插件開發(fa)的(de)。

最開(kai)始我打算(suan)照著官(guan)方文(wen)檔(dang)來做的，但是我一看官(guan)方文(wen)檔(dang)的內容(rong)著實有點多。轉頭一想，我只是要(yao)做個插件，而不是學怎(zen)么做插件，所以說就直(zhi)接開(kai)始做了。

之所以有這個底氣是以為有 Cursor，這個IDE注冊后有15天的免費試用期，我當時已經用過幾天了，發現它它使用的 claude-3.5-sonnet模型寫(xie)代碼非(fei)常厲(li)害(hai)，基本上直接運行只(zhi)需要微調就(jiu)可以了(le)，所以我就(jiu)想趁著試用期結(jie)束做(zuo)一個出來，也實地驗證一下 Cursor 是不是值得買。

我(wo)這個(ge)插件(jian)做了一(yi)個(ge)周(zhou)末(mo)，外加(jia)好幾個(ge)晚上，基本上每(mei)個(ge)晚上都到 12點(dian)吧，完完整(zheng)(zheng)整(zheng)(zheng)加(jia)起來怎么也(ye)得有(you)40個(ge)小時(shi)，這可(ke)是(shi)一(yi)周(zhou)的(de)工作時(shi)間啊，結果還沒人(ren)用，可(ke)惜了。

核心邏輯

這個(ge)插件(jian)的(de)核心(xin)功能有兩個(ge)：

1、 在小窗口（默認左下角）創建一個面板，然后在面板上控制 gif 圖片的切換和移動，附帶著增加元素、切換背景、自定義背景、清除面板這些功能；

2、實現(xian)打擾編程模式(shi)，就是(shi)在一(yi)堆 gif 圖片中隨機(ji)(ji)選中一(yi)張，然后顯示在 IDE 的(de)一(yi)個隨機(ji)(ji)位置，運(yun)行3秒(miao)內(nei)的(de)一(yi)個隨機(ji)(ji)時間(jian)后消失；

所以(yi)這樣看來，困難的地方(fang)在(zai)于如何在(zai)左下角創(chuang)建一個(ge)面(mian)板(ban)，并(bing)且給面(mian)板(ban)加上操作按鈕，相(xiang)對(dui)來說(shuo)，控制(zhi) gif 圖片的移動、切換(huan)這就(jiu)是(shi)比較簡(jian)單的了(le)。

之所以困(kun)難(nan)，是(shi)因為我(wo)完全不知道插件開發的規(gui)則(ze)(ze)，顯然這(zhe)些規(gui)則(ze)(ze)都是(shi)明確規(gui)定(ding)好(hao)的，只要照著做就(jiu)好(hao)了(le)，但(dan)是(shi)熟悉這(zhe)些規(gui)則(ze)(ze)最大(da)的問題就(jiu)是(shi)需要時(shi)間，而(er)我(wo)又不想(xiang)花這(zhe)個時(shi)間。

這時候(hou)看(kan)出(chu) AI 的(de)(de)核心(xin)價值了，可以迅(xun)速補齊你的(de)(de)短(duan)板，提高你的(de)(de)開發(fa)效(xiao)率。而不是(shi)完(wan)完(wan)全全替你寫代(dai)碼(ma)。看(kan)到有些人(ren)發(fa)的(de)(de)一(yi)些短(duan)視頻說「一(yi)點兒(er)編程(cheng)基礎都(dou)沒有，純靠AI做(zuo)了一(yi)個(ge)xxxxxx產品」。這純粹就是(shi)胡說八道，忽悠(you)忽悠(you)外(wai)行還(huan)可以，一(yi)點編程(cheng)基礎都(dou)沒有的(de)(de)人(ren)不可能完(wan)全靠 AI 做(zuo)一(yi)個(ge)產品出(chu)來。

幾個關鍵要素

Gradle 類型的項目

基本上用 IDEA 創建好項目后就可以開發了，項目默認是 Gradle 類型的。你只要關心 build.gradle.kts這個配(pei)(pei)置文件就(jiu)可以了，其他(ta)的不(bu)用管。在這里面配(pei)(pei)置包名(ming)、版(ban)本號(hao)和版(ban)本支(zhi)持信息。

如果你功能簡單的話，甚至完全不需要引用外部依賴，如果有的話，也是在這個文件中添加。我這個插件唯一引用的外部依賴就是 Gson，因為(wei)有(you)一些配置內容要讀取和(he)保存使用的(de) JSON 格式。

dependencies {
  implementation("com.google.code.gson:gson:2.8.9")
}

plugin.xml

resouces/META-INF/plugin.xml這個(ge)文件(jian)相當于一(yi)個(ge)規約聲明文件(jian)，你要在(zai)(zai)什么(me)地方創建 ToolWindow ，在(zai)(zai)什么(me)地方創建菜單，以及一(yi)些初始加(jia)載的服務類(lei)，都在(zai)(zai)這個(ge)文件(jian)中定義。

下(xia)面就是(shi)定義左(zuo)邊小窗口的配置，還有兩個初始加載服(fu)務類，就跟 Spring 里依賴注入的服(fu)務差(cha)不多，插件(jian)一啟(qi)動，這兩個服(fu)務類就被(bei)實例化好了。

<extensions defaultExtensionNs="com.intellij">
	<toolWindow id="DarkFactory" secondary="true" icon="/icons/pluginIcon.png" anchor="left"
				factoryClass="com.moonkite.moonpets.MoonPetsToolWindowFactory"/>
	
	<projectService serviceImplementation="com.moonkite.moonpets.PetService"/>
	<projectService serviceImplementation="com.moonkite.moonpets.config.MoonPetsState"/>
</extensions>

下面是在 Tools菜單項中加入黑工廠：打擾模式這個菜單項。

  <actions>
    <action id="ShowPet" class="com.moonkite.moonpets.ShowPetAction" text="黑工廠：打擾模式" description="開啟打擾模式后，會隨機在IDE中出現動畫元素">
      <add-to-group group-id="ToolsMenu" anchor="last"/>
    </action>
</actions>

剩(sheng)下的(de)部(bu)分就是(shi)在具體(ti)的(de) Java 類中(zhong)實現邏輯了。

另外這里(li)面還可以定義插(cha)件(jian)支(zhi)持(chi)的版(ban)本范圍，下(xia)面這個(ge)插(cha)件(jian)支(zhi)持(chi)的版(ban)本區間，從 2022.2 到(dao) 2024.2 這個(ge)范圍內(nei)都可以。

<idea-version since-build="222" until-build="242.*" />

還有一個 <description>，就是(shi)(shi)安裝插件時顯示的介(jie)紹信息(xi)。如果你之后有發布插件的計劃，這(zhe)地方要(yao)注意(yi)一下，描述(shu)的第一行不能是(shi)(shi)中(zhong)文，必須是(shi)(shi)英文，要(yao)不然審核不通過。

素材

AI 省去不少寫(xie)代(dai)碼的時間(jian)，但是素材它沒辦法搞定啊。

我開始打算(suan)直接把 VsCode pets 中的(de)素材照搬過來，命名規則就(jiu)是從那(nei)里(li)過來的(de)，因為這樣最省事(shi)了(le)。

后(hou)(hou)來感覺一(yi)(yi)堆動(dong)(dong)物(wu)比較(jiao)單(dan)調，就(jiu)想加(jia)一(yi)(yi)點其他的(de)。這才有了拳皇(huang)(huang)背景和幾個(ge)拳皇(huang)(huang)人(ren)物(wu)。我找了差不多完(wan)整(zheng)的(de)拳皇(huang)(huang)97素材圖(tu)。背景還好(hao)(hao)說，直接就(jiu)能用(yong)，但是人(ren)物(wu)不行，人(ren)物(wu)動(dong)(dong)作太多了，為了延續寵物(wu)運動(dong)(dong)的(de)邏輯，所以要統一(yi)(yi)命名(ming)規則，然(ran)(ran)后(hou)(hou)就(jiu)開始在一(yi)(yi)堆素材中(zhong)挑(tiao)幾個(ge)動(dong)(dong)作圖(tu)，包括走、跑、跳、攻擊招數，挑(tiao)好(hao)(hao)后(hou)(hou)改(gai)名(ming)，然(ran)(ran)后(hou)(hou)寫到(dao)默(mo)認(ren)配置文件中(zhong)。

因為太(tai)麻(ma)(ma)煩(fan)了，所以現(xian)在只有5個人物(wu)，分別(bie)為八神庵、草(cao)薙京、不(bu)知火(huo)舞、坂崎良、布魯·瑪麗，剩(sheng)下嫌麻(ma)(ma)煩(fan)還沒(mei)加。

本(ben)來還(huan)想弄(nong)點(dian)超級(ji)瑪麗、魂斗(dou)羅之類的，后來想想還(huan)是算了。

就這么說吧(ba)，搞素材這事兒可比寫代碼難受多了，就跟程序員不愿意寫文檔一(yi)個道理，懂的都懂。

最后

雖(sui)然說沒什么用(yong)，但是(shi)(shi)開發過(guo)程還是(shi)(shi)很(hen)好(hao)玩兒的(de)，尤其是(shi)(shi)有了 AI 的(de)幫助，讓之前很(hen)多不(bu)能做，或者做起來要(yao)花很(hen)多時間(jian)的(de)產品能夠很(hen)快的(de)被(bei)做出來。

不是(shi)有人說(shuo)嗎，之后(hou)各(ge)個應(ying)用商店的提交量應(ying)該會變(bian)大(da)，因為開發一(yi)款(kuan)產品變(bian)得簡單了。

還是要(yao)說(shuo)一(yi)下(xia)，各位摸魚(yu)的(de)時候可(ke)以下(xia)載體(ti)驗(yan)一(yi)下(xia)這個「黑工廠」插件(jian)。 插件(jian)商(shang)店直接搜 『Dark Factory』就可(ke)以了。

源碼在

還可以看看風箏往期文章