使用js開發一個快速開啟前端專案的alfred外掛

空山與新雨發表於2023-09-20
JS前端Alfred

使用js開發一個快速開啟前端專案的外掛

目錄

前言

一直以來開發都是先開啟vscode，然後選擇專案，在專案多的情況下會覺得挺繁瑣；如果同時開啟了許多vscode視窗，尋找目標視窗也比較麻煩，於是萌生了開發一個alfred的工作流外掛的想法，目標是在alfred搜尋框可以透過code命令直接開啟指定的專案。

使用的技術棧

作為前端一枚，當然要使用js來開發，社群有成熟的js開發方案：alfy ， alfy可以將工作流外掛釋出到npm,然後透過安裝npm包安裝alfred工作流外掛。

最新版的alfy要求使用es模組開發，並且使用了alfy相當於要求使用者電腦上是安裝nodejs,並且版本最好>=16

步驟

  1. 首先在alfred中建立一個空白workflow，位置目錄/Users/xxx/Library/Application\ Support/Alfred/Alfred.alfredpre ferences/workflows/ 。直接在預設的工作流目錄開發有兩個問題，一是開發目錄和安裝目錄衝突，二是不適合使用git作為版本控制，為了更好的開發維護,將建立的工作流資料夾複製到自己常用的工作目錄。

    現在專案的位置變了，如何實時開發預覽呢？解決方案：透過建立軟連線的方式把專案目錄連結到alfred工作流外掛目錄。在mac中，就是使用ln 命令建立軟連線。

    // 建立軟連結
ln -s /Users/name/xinyu-alfred-open-in-vscode /Users/name/Library/Application\ Support/Alfred/Alfred.alfredpreferences/workflows/xinyu-alfred-open-in-vscode
// 刪除軟連結
unlink /Users/name/Library/Application\ Support/Alfred/Alfred.alfredpreferences/workflows/xinyu-alfred-open-in-vscode

    後來發現alfy是提供了alfy-link命令，該命令可以直接建立軟連結。

    alfred-link
alfred-unlink

    需要注意，mac 中建立替身目錄和軟連結並不相同，在這裡使用替身無法生效。

  2. 然後就是開發工作流，先新增一個script filter，需要配置執行的指令碼和喚起命令，這裡使用vscode的預設命令，外加加一個空格

    先透過環境變數獲取使用者指定的目錄，這些目錄可以在外掛中設定，然後獲取目錄下的所有資料夾並在alfred中展示出來。alfy封裝的api足夠使用了。

  3. 新增開啟vscode的邏輯，在這一步中呼叫bash執行命令，此處執行的是code命令，然後在vscode中開啟指定的專案。

  4. 最終產品展示

image

問題發現

因為需要在刪除包之後可以自動刪除alfred的工作流下面的軟連線，所以按照alfy的文件新增了preuninstall鉤子，然後在真正解除安裝npm包的時候卻發現軟連線沒有被刪除，最後發現preuninstall在npm7之後就不支援了。所以目前如果刪除外掛後，需要手動在alfred中刪除外掛。

待最佳化

  1. 使用LRU演算法將常開啟專案儘量放置到前面

最後分享一下包名： xinyu-alfred-open-in-vscode

相關文章