iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Software Development

自己用的工具自己做! 30天玩轉VS Code Extension之旅系列 第 19

Day19 | 專案實戰:CodeManager介紹

大家好,今天是第十九天。我們將開始實作一個用滿足現實生活需求的擴充套件,今天會先了解專案必備的功能與需求,以及一些相關背景。

專案緣起


這次鐵人賽我們將做的專案將會跟程式碼片段很有關係,相信大部分的人都使用過了Code Snippet。沒有很熟悉設定也沒關係,接下來的賽程我們會為讀者做說明。

在VSCode裡面,我們可以透過定義snippet物件或安裝擴充套件,在我們打字時產生如上圖的code snippet提示。按下去,一鍵就可以產生事先寫好的程式碼片段,非常方便。

但裝多了snippet套件時會有個問題,snippet套件會指定對應語言。

正常像筆者現在編輯typescript檔案,輸入文字時,VSCode就會跳出提示來跟我們講有什麼程式碼片段可以使用。

筆者現在想在function裡寫個return,打兩個字就跳出react native相關程式碼片段的提示。對正在開發vscode extension的專案,這時用不到react native的片段,跳出來的提示就變成干擾啦。

在VSCode裡面,我們可以到安裝套件的頁面,去指定停用當下workspace下面的套件。

可是啊,筆者可是裝了很多程式碼片段套件啊,讀者可以看到,不光是react的程式碼片段,就連angular的片段再打re的時候也跳出來了,每開一個extension套件就要一個一個套件開開關關,多麻煩啊!

這個時候,如果有個套件針對不同專案類型,而非語言。自動幫我們把不需要的套件關掉,啟動這些套件,不是方便很多嗎?

幸運的是,在VSCode擴充套件裡,這些需求是可以被達成的。

底下就來讓筆者就會介紹此次專案會實現的功能。

CodeManager專案需求介紹


筆者預想的專案功能,有兩大方向。

一是可以讓使用者自定義加入並編輯自己的程式碼片段,根據分類套用至不同專案。
二是可以管理不同extension的套件,讓套件在不需要使用它的專案被禁用

除此之外,專案預計至少實現以下功能:

  1. 使用者可讀取程式碼片段工作區的程式碼做管理
  2. 可於樹狀選單呈現當前使用者的程式碼片段
  3. 可設定個人設定,針對不同專案類型載入特定的code snippet
  4. 可於管理介面設定snippet分類
  5. 可手動選擇是否載入特定分類的snippet至vscode中
  6. 使用者要能選取VSCode裡的文字,並能夠把選中的程式碼加入Code Snippet的儲存區中。
  7. 使用者可以選定本地儲存路徑,創建一個工作區放置snippet片段。
  8. Extension使用者可以將儲存的snippet片段與Github、Gist同步。
  9. 使用者可以於搜尋框查詢儲存過的snippet,並能對其進行編輯修改、刪除。
  10. 使用者可以在使用者介面新建一個snippet 片段,指定active的語言等屬性

上是我們規劃的功能。

鐵人賽我們的章節分配會根據上面功能做對應調整,原本規劃的VSCode Snippet實戰、第三方服務整合、測試與發佈篇,均會合併到今天開始的VSCode Extension專案實戰,並在這個專案中做實際練習與說明。VSCode語言服務實戰篇章將視情況增減。

本日結語


本次範例的功能需求是在今天第十九天決定的。

按照原來的規劃,基本介紹一篇,設定相關兩篇,元件相關介紹大約十到十二篇。全部應該十五篇左右,目前全部完成約十八篇,篇章進度延後,現在到完賽我們還有十一篇可以發揮。

其中Webview佔四篇,這個份量我覺得是合理的。Webview需要注意的地方相對比較多,Workspace API少介紹一兩個設定,只需查閱文件去了解如何使用這個設定。但Webview的設定沒有搞清楚,很容易會整個網頁的圖片資源都無法正常顯示,然後開始鬼打牆除錯。

參考前面篇章的經驗,考量到今天規劃的各個功能,筆者會調整章節分配,希望讀者在練習中有收穫,並體驗實際解決現實生活問題的感受。

我們明天見,謝謝大家。

2020.10.20: 最近似乎有人在洗這個系列的文章數,各篇文章的點閱率會莫名的呈現同一個閱讀數,以今天10.20上午筆者看到的狀況為例,各篇點閱率都被洗到126,這裡做個紀錄。


上一篇
Day18 | WebView API (四)
下一篇
Day20 | 初始專案與元件配置
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36

尚未有邦友留言

立即登入留言