使用js開發一個快速開啟前端專案的外掛
目錄
前言
一直以來開發都是先開啟vscode，然後選擇專案，在專案多的情況下會覺得挺繁瑣；如果同時開啟了許多vscode視窗，尋找目標視窗也比較麻煩，於是萌生了開發一個alfred的工作流外掛的想法，目標是在alfred搜尋框可以透過code命令直接開啟指定的專案。
使用的技術棧
作為前端一枚，當然要使用js來開發，社群有成熟的js開發方案：alfy ， alfy可以將工作流外掛釋出到npm,然後透過安裝npm包安裝alfred工作流外掛。
最新版的alfy要求使用es模組開發，並且使用了alfy相當於要求使用者電腦上是安裝nodejs,並且版本最好>=16
步驟
-
首先在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 中建立
替身目錄和軟連結並不相同，在這裡使用替身無法生效。 -
然後就是開發工作流，先新增一個script filter，需要配置執行的指令碼和喚起命令，這裡使用vscode的預設命令，外加加一個空格
先透過環境變數獲取使用者指定的目錄，這些目錄可以在外掛中設定，然後獲取目錄下的所有資料夾並在alfred中展示出來。alfy封裝的api足夠使用了。
-
新增開啟vscode的邏輯，在這一步中呼叫bash執行命令，此處執行的是
code命令，然後在vscode中開啟指定的專案。
-
最終產品展示
問題發現
因為需要在刪除包之後可以自動刪除alfred的工作流下面的軟連線，所以按照alfy的文件新增了preuninstall鉤子，然後在真正解除安裝npm包的時候卻發現軟連線沒有被刪除，最後發現preuninstall在npm7之後就不支援了。所以目前如果刪除外掛後，需要手動在alfred中刪除外掛。
待最佳化
- 使用LRU演算法將常開啟專案儘量放置到前面
最後分享一下包名： xinyu-alfred-open-in-vscode