iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0

好啦,今天是第三十天了,今天會分享下賽程心得,並回顧一下前面系列文,最後是三十天後的規劃!


參賽動機&回顧


這次參加鐵人賽,主要有幾個目標:

  1. 透過鐵人賽的推力,讓自己願意從最基本的原理跟說明介紹開始,介紹extension的使用與學習
  2. 讓後續的開發者有基本的教學可以參考,並了解一些官方文件未提及的面向
  3. 開發解決現實生活需求的Extension,並且上架。

大概快一年前左右,筆者在vscode的市集發佈了自己的extension,並未特別宣傳,也默默地有幾百個人下載量。

當時的我,除了vscode的官方文件,也參考了一位國人的VSCode系列文: VSCode開發全攻略

快速了解了元件的使用方法,藉著官方文件與網路上前人的分享兩三個禮拜快速的完成開發與上架,但即使已經完成treeview等功能,我發現自己對這些api跟元件的設計,僅僅是知道用法,並不是很有感覺。

因此在前期,我也是利用機會從基本的編輯器開始介紹,讓自己對extension的command中的namespace熟悉起來,對於command的使用與查找沒有問題後,接著開始介紹api,到後面發現,原本以為查了就有的api資訊但又很陌生的用法,逐漸關聯起來。

相關的系列文為2~8天的分享

  • Day02 | VSCode使用者介面概覽
  • Day03 | VSCode使用者與工作區設定
  • Day04 | Command命令,一切VSCode操作行為的根源
  • Day05 | 在Extension專案裡執行第一個Command命令吧
  • Day06 | 用Command API來操控使用者的VSCode吧
  • Day07 | 那些你可以自訂選項的Context Menu

再來後面我覺得,已經了解extension許多地方的設計方式了,可以開始做一些使用者互動跟實務一點的分享
所以開始了底下兩篇的介紹

  • Day08 | 提供使用者Extension的設定選項吧
  • Day09 | Data Storage以及教學中沒有特別提及的小細節
  • Day10 | 你問我答,Extension與使用者的互動流程

等確實帶了api的使用後,我想,Ok,已經操作過這些api應用了。可能還是稍微有點陌生,所以開始了

Day11 | 那些跟extension開發脫不了關係的window命名空間api

主要希望讀者跟自己都能在這過程中,一邊閱讀系列文,了解基本的用法,同時,也開始查找官方api文件。

接下來就介紹我覺得比較重要的元件

再來後面我覺得,已經了解api的設計方式了,可以開始探討一點元件設計的方式與物件導向的練習了

所以先從TreeView的兩個系列文開始

  • Day12 | 打造VSCode上的TreeView樹狀選單 (一) - 元件基本用法介紹
  • Day13 | 打造VSCode上的TreeView樹狀選單 (二) - DataProvider的原理與相關觀念 X List的增刪改查

之後介紹extension很常使用的OutputChannel

  • Day14 | OutputChannel,輸出Extension的訊息

與功能強大的WebView

  • Day15 | Webview API (一)
  • Day16 | WebView API (二)
  • Day17 | WebView API (三)
  • Day18 | WebView API (四)

Webview第一天先動手開始一個Webview。
第二天~三天,了解在Webview裡的如何配合安全機制使用Javascript與assets,同時穿插一些VSCode API設計的思想。
第四天是將流行的SPA整合到WebView,以React作為示範,了解如何一些整合上的地雷與避免的方法。

在第十九天開始規劃一個CodeManager專案與開發基礎,這個專案的設計是為了解決我在實際使用VSCode後遇到的痛點與需求,目前也沒有在VSCode Extension的Marketplace上看到類似的擴充套件。

  • Day19 | 專案實戰:CodeManager介紹
  • Day20 | 初始專案與元件配置
    ...

第二十五天開始介紹設計模式與架構分享

  • Day25 | Extension事件與資料處理
  • Day26 | 實現Extension內的MVVM架構

之後的兩三天,回到實作與專案重點功能有關的api介紹

  • Day28 | 獲取安裝的extension進行操作
  • Day27 | 導入WebviewPanel

第二十九天,了解如何使用language命名空間底下的api產生snippet

  • Day29 | 使用extension動態產生snippet提示吧!

目前當初的第三點目標尚未呈現給讀者,賽程結束。

本系列仍會持續進行中,直到介紹到可以解決需求的專案與上架的部分。

後續規劃系列文的部分主要為

  • Webview與Extension資料流
  • 專案上架/CI/CD整合

系列文完成後,因為筆者正為其他活動分身乏術,之後再過一段時間會開始

  • 附錄:Angular/Vue與Webview整合

感謝在網路上分享知識的各位筆者。

也感謝閱讀這個系列的讀者,我們之後再見,謝謝大家!


上一篇
Day29 | 使用extension動態產生snippet提示吧!
下一篇
Day31 | 提供程式碼編輯的editor區域
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
默零
iT邦新手 5 級 ‧ 2020-10-16 09:04:38

恭喜擦身而過的戰友!!!We did it!!

看更多先前的回應...收起先前的回應...

感謝感謝,恭喜妳這邊完賽啊!

默零 iT邦新手 5 級 ‧ 2020-11-25 22:24:54 檢舉

恭喜無緣的隊友一個人過關斬將獲得冠軍哪~

也恭喜妳獲得優選啊。認真說起來,結果不是重點,過程才是最重要的(總算可以說這句話了XD)。

最近專案期限要到了,回覆有點慢,拍謝!

默零 iT邦新手 5 級 ‧ 2020-12-01 14:17:36 檢舉

無論無何,乾杯啦((乾咖啡?

我要留言

立即登入留言