Fitten Code VSCode 版安裝教程

2025-03-12 18:18 更新

(版本要求1.68.0及以上)


1.安裝

  • 如果您已經安裝 VSCode 且版本大于等于 1.68.0,請直接跳過此步驟。否則請點擊下載前往官網下載安裝 VSCode。
  • 打開 VSCode,點擊右側 Extensions(擴展)按鈕
    Fitten Code VSCode 版安裝教程-安裝-1
  • 在搜索框中搜索“?Fitten Code?”
    Fitten Code VSCode 版安裝教程-安裝-2
  • 在搜索結果中點擊安裝
    Fitten Code VSCode 版安裝教程-安裝-3
  • 登錄注冊后即可開始使用
    Fitten Code VSCode 版安裝教程-安裝-4


2.智能補全


  • 打開代碼文件,輸入一段代碼,Fitten Code 就會為您自動補全代碼
    Fitten Code VSCode 版安裝教程-智能補全1
  • 按下 tab 接受所有補全建議
    Fitten Code VSCode 版安裝教程-智能補全2
  • 按下 ctrl+?? 接收單個詞補全建議
    Fitten Code VSCode 版安裝教程-智能補全3


3.AI問答


  • 用戶可通過點擊左上角工具欄中的“Fitten Code – 開始對話”或者使用快捷鍵“Ctrl+Alt+C”打開對話窗口進行對話
    Fitten Code VSCode 版安裝教程-AI問答1
  • 當用戶選中代碼段再進行對話時,Fitten Code會自動引用用戶所選中的代碼段,此時可直接針對該代碼段進行問詢等操作
    Fitten Code VSCode 版安裝教程-AI問答2


4.生成代碼


  • 可在左側Fitten Code工具欄中選擇“Fitten Code - 生成代碼”或者使用快捷鍵“Ctrl+Alt+G”,如下圖所示
    Fitten Code VSCode 版安裝教程-AI問答3
  • 然后在輸入框中輸入指令即可生成代碼
    Fitten Code VSCode 版安裝教程-AI問答4
  • 利用對話功能生成代碼
    Fitten Code VSCode 版安裝教程-AI問答5


5.翻譯代碼


  • 選中需要進行翻譯的代碼段,右鍵選擇“Fitten Code – 編輯代碼”或點擊左側工具欄中的“Fitten Code – 編輯代碼”或者使用快捷鍵“Ctrl+Alt+E”,如下圖中①、②所示
    Fitten Code VSCode 版安裝教程-代碼翻譯1
  • 然后在輸入框中輸入轉換命令即可完成轉換
    Fitten Code VSCode 版安裝教程-代碼翻譯2
  • 選中需要進行翻譯的代碼段,右鍵選擇“Fitten Code – 開始聊天”或點擊左側工具欄中的“Fitten Code – 開始聊天”或者使用快捷鍵“Ctrl+Alt+C”, 如下圖中①、②所示
    Fitten Code VSCode 版安裝教程-代碼翻譯3
  • 然后在輸入框中輸入轉換命令即可完成轉換
    Fitten Code VSCode 版安裝教程-代碼翻譯4


6.生成注釋


  • Fitten Code 能夠根據您的代碼自動生成相關注釋,通過分析您的代碼邏輯和結構,為您的代碼提供清晰易懂的解釋和文檔,不僅提高代碼的可讀性,還方便其他開發(fā)人員理解和使用您的代碼。先選中需要生成注釋的代碼段,然后右鍵選擇“Fitten Code – 生成注釋”
    Fitten Code VSCode 版安裝教程-代碼翻譯5
  • 即可生成對應注釋如下圖25所示,點擊“Apply”后即可應用。
    Fitten Code VSCode 版安裝教程-代碼翻譯6


7.解釋代碼


  • Fitten Code可以對一段代碼進行解釋,可以通過選中代碼段然后右鍵選擇“Fitten Code – 解釋代碼”進行解釋,如下圖26所示
    Fitten Code VSCode 版安裝教程-代碼解釋1
  • 此外,還可以進一步回答用戶關于這段代碼的疑問,如下圖所示。
    Fitten Code VSCode 版安裝教程-代碼解釋2


8.生成測試


Fitten Code擁有自動生成單元測試的功能,可以根據代碼自動產生相應的測試用例,提高代碼質量和可靠性。通過選中代碼段后右鍵選擇“Fitten Code – 生成單元測試”來實現,如下圖所示。

Fitten Code VSCode 版安裝教程-生成測試1

Fitten Code VSCode 版安裝教程-生成測試2


9.檢查BUG


Fitten Code可以對一段代碼檢查可能的bug,并給出修復建議。選中對應代碼段,然后右鍵選擇“Fitten Code查找Bug”,如下圖所示。

Fitten Code VSCode 版安裝教程-檢查BUG


10.編輯代碼


Fitten Code可根據用戶指示對選定的代碼塊進行編輯,用戶點擊“Apply”后即可應用變更。通過選中代碼段右鍵選擇“Fitten Code – 編輯代碼”或在左上角工具欄點擊“Fitten Code – 編輯代碼”,如下圖所示。

Fitten Code VSCode 版安裝教程-編輯代碼1

隨后,用戶可在輸入框中輸入指示,Fitten Code會新建一個窗口對比顯示更改前和更改后的內容,用戶可通過點擊“Apply”應用更改,如下圖所示。

Fitten Code VSCode 版安裝教程-編輯代碼2


11.預覽功能


Fitten Code現在支持預覽功能,用戶在對話中要求生成的html單文件將自動生成完整代碼并且彈出預覽

Fitten Code VSCode 版安裝教程-預覽功能1

Fitten Code VSCode 版安裝教程-預覽功能2


12.分享功能


Fitten Code現在支持分享功能,用戶可將對話結果可以分享導出給其他用戶,其他用戶還可以在分享的對話基礎上進行編輯和修改。點擊對話下方的分享按鈕

Fitten Code VSCode 版安裝教程-分享功能1

隨后Fitten Code會彈出一個分享鏈接,用戶可將打開鏈接或復制鏈接

Fitten Code VSCode 版安裝教程-分享功能2

用戶可將鏈接發(fā)送給其他用戶,其他用戶打開鏈接可以進一步進行編輯和修改

Fitten Code VSCode 版安裝教程-分享功能3


13.自動上下文


Fitten Code可以在AI對話中自動獲取上下文,用戶只需在聊天框直接問,“這段代碼是什么意思”,或者“能解釋一下這段代碼嗎”AI會自動的獲取IDE上下文進行回答

Fitten Code VSCode 版安裝教程-自動上下文


14.多模態(tài)功能


Fitten Code現可上傳圖片,并根據圖片生成代碼。點擊圖片上傳并選擇要上傳的圖片

Fitten Code VSCode 版安裝教程-多模態(tài)功能

上傳圖片之后可以補充說明

Fitten Code VSCode 版安裝教程-多模態(tài)功能2

之后Fitten Code可以根據上傳的圖片生成代碼,比如截圖生成前端代碼或者表單

Fitten Code VSCode 版安裝教程-多模態(tài)功能3


15.設置選項


點擊右下角Fitten圖標,然后選擇“打開插件設置”,即可打開Fitten Code的設置頁面。以下為可設置選項

  1. 延遲自動補全的時間(單位:毫秒)
  2. 是否開啟自動補全
  3. 為特定文件后綴禁用自動補全,例如輸入:md;py
  4. Fitten Code 回答時的語言首選項(不包括Fitten Code - Document Code"功能)
  5. 使用"Fitten Code - 生成注釋"功能時的語言首選項
  6. 注釋文檔的參考模版,以指定生成注釋的規(guī)范
  7. 在diff視圖中使用VSCode主題色彩高亮語法


16.常見問題


如果vscode遠程服務器remote無法連接外網時,請點擊左下角?按鈕,再點擊設置

Fitten Code VSCode 版安裝教程-常見問題1

然后在設置頁面點擊右上角“打開設置(JSON)”

Fitten Code VSCode 版安裝教程-常見問題2

最后只需在彈出的settings.json文件中添加以下內容即可:

"remote.extensionKind": ' "FittenTech.Fitten-Code": ["ui"] '

Fitten Code VSCode 版安裝教程-常見問題3

  • 可以完整閱讀一個代碼文件嗎?
    答:和文件大小有關,如果文件太大則只會根據部分上下文進行推測
  • 解釋代碼有限制代碼長度嗎?
    答:目前的解釋代碼長度限制為 1000 行
  • 生成注釋支持英文注釋嗎?
    答:點擊右下角 Fitten 圖標,然后選擇“打開插件設置”,設置注釋語言為英文即可
  • 如何使用pro?
    答:打開一個 chat 窗口,首次對話時,在輸入框中選擇 Fitten Code Pro Search 即可
  • 代碼會有泄露風險嗎?
    答:我們嚴格保障用戶代碼安全,遵守歐盟,美國,中國各國生成式 AI 法律法規(guī),服務器符合三級等級保護安全要求,和金融領域的安全等級是一樣的標準,同時我們還可以為企業(yè)提供私有化服務
  • 如何選擇各功能回答時的語言?
    答:點擊右下角 Fitten 圖標,然后選擇“打開插件設置”,即可設置對應功能回答的語言

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號