在 2024 年年底,終於將我之前想跟隨的自定義多檔案編輯功能釋出了。在最新的版本里,你可以體驗一系列的 AI IDE 智慧體特性:
-
自定義 ChatBox 行為 + Patch Sketch。一次讓 AI 修改多個程式碼檔案,並且將與更友好的檢視來展示它們。
-
流式 Diff。現在你可以在 Shire 上體驗到即時的程式碼差異比較功能(基於 Continue 的 UI 修改)。
-
智慧上下文感知。當你在 ChatBox 中選擇程式碼檔案時,我們會結合靜態分析和程式碼語義分析,為你提供更多的上下文資訊。
-
Shire Sketch 檢視。我們為 Shire 提供了一個畫布功能,可以展示 Mermaid 流程圖、PlantUML 圖表等,並可以直接執行程式碼。
詳細見官方文件:https://shire.phodal.com/ 。
最終結果的演示影片見:https://www.bilibili.com/video/BV1AZC6YBEqZ/
多檔案編輯:ChatBox
在 Shire 中右側的 ChatBox 是一個可自定義的元素,你可以編寫對應的 Shire 指令來控制 ChatBox 的行為。如在 1.2.4 版本中,我們支援了多檔案編輯功能:
-
智慧檔案導航:透過
/goto
命令實現快速跨檔案跳轉 -
資訊結構化:透過
/structure
命令來簡化相關的程式碼: -
檔案路徑補全:支援智慧的檔案路徑補全,提高輸入效率
-
相關類引用:自動識別和提供相關類的引用建議
如下是 ChatBox 的一個示例:
-
---
-
name:"Shire 多檔案編輯示例"
-
description:"Shire 多檔案編輯示例"
-
interaction:RightPanel
-
actionLocation:ChatBox
-
---
-
根據使用者的要求和現有的程式碼編寫Java程式碼。要求:
-
1.使用 diff patch 的方式。
-
2.如果是新檔案也使用 patch 的格式。
-
3.每個檔案的修改也請用 diff 的形式給出。
-
使用者的需求如下:
-
$chatPrompt
在這個示例中,我們定義了一個 ChatBox 智慧體,用於多檔案編輯。在這個智慧體中,會結合使用者的需求,生成對應的程式碼檔案。而其中的
$chatPrompt
則是使用者的輸入。此時,使用者在輸入時,可以結合 Shire 提供強大的上下文、智慧體語言能力。智慧上下文感知
基於 Shire 內建的靜態程式碼分析能力,現在你可以在透過
/file
選中檔案的時候,推薦相關的類引用。如下圖所示:
-
當用戶選中了 Controller 之後,會推薦相關的 Service 類、DTO 類引用;
-
當用戶選中了 Service 之後,會推薦相關的 Entity 類、Repository 類引用。
只需要擴充套件 Shire 的
RelatedClassProvider
介面就可以快速為主流語言提供這個能力,並且我們也將在未來結合 Shire 的相似程式碼推薦功能,為使用者提供更多的上下文感知。簡化程式碼結構的: /structure
通常來說,當你透過
/file
來選中程式碼時,可能會有一些不必要的程式碼,如註釋、空行等。此時,你可以透過 /structure
命令來簡化程式碼結構。如下 是一個簡化後的程式碼:-
file name:BlogController.java
-
file package: package com.phodal.shire.demo.controller;
-
class BlogController{
-
BlogService blogService;
-
+ public BlogController(BlogService blogService)
-
+@GetMapping("/{id}") public BlogPost getBlog(@PathVariableLong id)
-
+@PostMapping("/") public BlogPost cftBlog(@RequestBodyCreateBlogRequest request)
-
}
-
file path: src/main/java/com/phodal/shire/demo/controller/BlogController.java
在上下文有限的模型中,你就可以更好地控制上下文長度,以提高使用者體驗。
跳轉 /goto
指令
而當你在 ChatBox 中輸入
/goto
指令時,Shire 會自動為你跳轉到對應的位置。如下是一個示例:-
/goto:com.phodal.shire.demo.controller.BlogController
其中,Shire 會自動為你跳轉到
BlogController
類的位置。Shire Sketch 檢視
Shire Sketch 是 Shire 提供的 IDE 畫布功能,旨在透過其豐富的文字程式碼(原始碼、Patch、UML、架構圖等)二次處理、渲染元件,進一步簡化互動成本, 以提升開發者在 IDE 中的體驗。無論是單個檔案的顯示、渲染操作,還是多檔案協作、修復,Shire Sketch 都能提供強大的支援。
-
即時流式程式碼高亮:即時顯示程式碼高亮的流式檢視。
-
內建差異(Patch 語言):顯示程式碼差異的內建檢視。
-
即時流式差異(StreamDiff):即時顯示程式碼差異的流式檢視,基於 Continue 的 UI 修改。
-
Mermaid 流程圖:支援 Mermaid 流程圖的渲染,與雙向繫結的程式碼編輯器。(要求啟用 Mermaid 外掛)
-
PlantUML 圖表:支援 PlantUML 圖表的渲染,與雙向繫結的程式碼編輯器。(要求安裝
PlantUML integration
外掛)

Mermaid Sketch
Mermaid Sketch 提供了流程圖的即時預覽和編輯功能,支援雙向繫結,讓圖表設計變得簡單直觀。

PlantUml Sketch
PlantUML Sketch 為 UML 圖表提供了強大的支援,配合雙向繫結的程式碼編輯器,輕鬆建立和修改各類 UML 圖表。

流式 Diff
流式 Diff 是 1.2 版本的一大亮點,我們基於 Continue 的UI ,提供了即時的程式碼差異比較功能:
-
即時差異展示:隨著程式碼修改即時顯示變化
-
智慧補丁應用:支援剪貼簿補丁的快速應用

如下是一個流式 Diff 的示例:
-
---
-
name:"Streaming Diff Refactoring"
-
actionLocation:ContextMenu
-
interaction:StreamDiff
-
---
-
請你這段程式碼建議適當的重構。提高程式碼的可讀性、質量,使程式碼更加有組織和易懂。你的回答應包含重構描述和一個程式碼片段,展示重構後的結果。
只需要將
interaction
設定為 StreamDiff
,即可在 ChatBox 中即時顯示程式碼差異。總結
Shire 1.2 版本的釋出,不僅帶來了自定義多檔案編輯功能,還提供了 Sketch 檢視、流式 diff 和智慧上下文感知等強大特性。這些新功能讓開發者能夠更加高效地進行程式碼編寫和協作。隨著版本的不斷迭代,Shire 正在成為 AI IDE 領域的一個重要玩家。
未來,我們還將繼續努力,為 Shire 新增更多實用和智慧的特性,幫助開發者提升工作效率,最佳化程式碼質量。

歡迎廣大開發者下載體驗,並提出寶貴意見。