育心文具行

標籤: sublime

Claude 的 Sublime Text4 外掛
昨天作了一份 ChatGPT 的外掛（請參考這裡），這次補 claude.ai 的外掛，克勞德這個名字聽起來就有種惡靈古堡個感覺（那是克勞薩），也是軟體設計很愛用的 AI 工具之一，希望補上 Sublime Text 裡面可以有一些貢獻與幫助。

操作方式與上篇 ChatGPT 外掛操作相當，差異在 api 不是同加公司，還有快捷鍵需要分開設定。先附上 API 文件（貼心的是他有中文）與外掛 repository 位置，這裡。

—

安裝前需要準備：
1. Sublime Text 最新版
2. anthropic 帳號，已有信用卡儲值（我們需要用 claude API）
安裝的方式有別於使用 Package Control 安裝，這使用手動安裝，主要是把 git 中的 “chatgpt” 資料夾放到 Sublime Text 的 Packages 資料夾中就行了。 Packages 資料的夾的位置請參考這裡，可以從 Sublime Text 的 “Preferences -> Browse Packages” 開啟。

另外我們需要設定 anthropic 的 API Key，請參考官方網站這裡取得，在 Sublime Text 的的外掛設定： “Preferences -> package-settings -> 👽 ChatGPT -> Settings – User” 之中添加 koken 參數（也可以複製修改 Default 的設定格式）

使用上有設定 keymap，因為我是 mac用戶，所以操作上，選定一串文字以後快速鍵 cmd+g ，稍等幾秒 ChatGPT 將會回覆資料，將回應貼到選定文字的後面。
修改快速鍵的話，也是從 “Preferences -> package-settings -> 👽 ChatGPT-> Key Bindings – User” 修改即可。

手動執行的話也能在 Topbar 的 Tools 中找到 “☁️ Claude” 選項，點一下就執行。記得要選取你要的對話文字喔！

—

最後來秀一下資料夾內容

主要的 claude.py 和之前寫 chatgpt.py 功能差不多，都可以當作簡單的 request/response 機制。

值得一提的是 claude 的 api 應該是使用了 cloudflare 來處理，我從 curl 上呼叫沒問題，但 Sublime Text 會一直收到 1010 的 403 error code ，這在幾個月前第一次嘗試的時候就有遇到，那時傻傻的一直問 AI 然後他一直旋轉我，現在突然會 Google 了XD 後來無奈只能加上 user-agent 的 header ，這太荒謬但有用。

而且滿值得吐嘈的是：不管 ChatGPT 或是 Claude 直接詢問 API 呼叫的程式碼時，得到的 API endpoint 根本就是幻想生成的，還好 AI 公司算有良心，API 文件不是用 AI 生成的，這次沒注意到為了 www.anthropic.com 和 api.anthropic.com 卡了半小時有點嘔就是。
2024-05-25
ChatGPT 的 Sublime Text4 外掛
Sublime Text 是我一直很愛用的編輯器，他輕巧和可客製化真的很方便，無論是開啟速度和需要才使用的外掛，我再處理 PHP 、Python 、Nodejs 甚至是 Vue3 的專案時都滿常用他來開啟的，我在 Sublime Text 上使用的 AI 工具是 Tabnine 這套外掛的免費版本，主要是不連網路使用。而有時也會想要方便有外掛可以連網，但是好像找不到相關可用的外掛安裝，於是自己研究做了一個，有空在研究看怎麼上傳到官方的套件管理上吧。

先上 repository 位置，這裡。

安裝前需要準備：
1. Sublime Text 最新版
2. OpenAI 帳號，已有信用卡儲值（我們需要用 OpenAI API）
安裝的方式有別於使用 Package Control 安裝，這使用手動安裝，主要是把 git 中的 “chatgpt” 資料夾放到 Sublime Text 的 Packages 資料夾中就行了。 Packages 資料的夾的位置請參考這裡，可以從 Sublime Text 的 “Preferences -> Browse Packages” 開啟。

另外我們需要設定 OpenAI 的 API Key，請參考官方網站這裡取得，在 Sublime Text 的的外掛設定： “Preferences -> package-settings -> 👽 ChatGPT -> Settings – User” 之中添加 koken 參數（也可以複製修改 Default 的設定格式）

使用上有設定 keymap，因為我是 mac用戶，所以操作上，選定一串文字以後快速鍵 cmd+g ，稍等幾秒 ChatGPT 將會回覆資料，將回應貼到選定文字的後面。
修改快速鍵的話，也是從 “Preferences -> package-settings -> 👽 ChatGPT-> Key Bindings – User” 修改即可。

手動執行的話也能在 Topbar 的 Tools 中找到 “👽 ChatGPT” 選項，點一下就執行。記得要選取你要的對話文字喔！

—

最後來秀一下資料夾內容

其中 data 參數可以依照自己的需要修改，如果你是習慣用 Sublime Text 來寫文章的朋友，可以把 system 的 content 改成你要的提示，或是模型按照需求和官方支援修改也行。官方文件參考，這裡。

以上，謝謝大家。
2024-05-25
vue3 學習筆記 EP2
在 sublime 中，.vue 的檔案再配置高亮（highlight）的實作方法，網路上很多推薦 vue-syntax-highlight 這個外掛，安裝方法就不贅述了。

而如果 .vue 檔案中包含了 script 和 template 兩個 tag 的話，這個外掛就很容易只會 highlight 上面的 tag ，這樣頗不方便的。後來發現，其實只要把 .vue 設定為 HTML 的格式， highlight 的動作就會很漂亮的。

但是 .vue 並非預設是 HTML 格式，內建設定中，打開 .vue 會是以純文字的形式，如果想要每次開啟預設都是以 HTML 格式開啟，需要調整一下設定：
1. 點擊 Sublime Text-> Preferences->Browse Packages，開啟資料夾。
2. 進入 Packages 資料夾後，點擊進入 User 資料夾。該資料夾是用戶設定的集合。
3. 創建一個 HTML.sublime-settings 檔案，並且依照格式輸入以下檔案清單，主要是有包含 vue 這個值就行的：
```
{
     // Which file extensions go with this file type?
    "extensions":
    [   
        "html5",
        "vue"
    ]
}
```
題外話，同樣的資料夾中，如果需要創建不同的對應，只要把 HTML.sublime-settings 名稱的 HTML 至換成想要的格式即可。
2022-10-02