今天筆者要介紹的第一個超好用工具是 VSCode 的擴充套件：

Schematics Snippets

這個超好用工具的作者，是我們臺灣的開發者： 黃升煌 Mike 。

而我們從名字中就可以看出這個套件提供的服務，正是大家在撰寫 Schematics 時，各種會用到的程式碼片段。

像是當需要在 schema.json 裡新增屬性時：

• 用來新增一般屬性的 sch-schema-property 。
• 用來新增帶有 (y/n) 提示訊息屬性的 sch-schema-property-prompt-yes-no 。
• 用來新增選單類提示訊息的 sch-schema-property-prompt-selection 。

如果不知道上述在說什麼的話，可以複習一下 Day05 - JSON Schema 的文章，筆者有較詳盡地介紹過。

當需要在 collection.json 裡新增 schematics 配置時：

• 用來新增沒有函式名稱的配置的 sch-coll-new-schematic-default 。
• 用來新增有函式名稱的配置的 sch-coll-new-schematic-function-name 。
• 用來新增 ng-add 的配置 sch-coll-ng-add 。

當然最重要的是當我們在撰寫程式時：

• 用來引入 TypeScript Compiler API 的 ts-import 。
• 用來將檔案內容轉成 AST 的 ts-string-to-ast 。

其他更多程式碼片段請參閱官方文件 。

雖然目前的程式碼片段還不多，不過等筆者寫完鐵人賽之後，會把更多更好用的程式碼都加上去，而大家如果有什麼建議也都可以直接發 PR 或是留言給我或是 Mike ，還請各位多多支持這個套件！！

此外，今天另外一個要介紹的工具是一個超好用的網站： TypeScript AST Viewer 。

TypeScript AST Viewer

這個網站的主要功用，就是幫我們非常快速地解析出某段程式碼的整個 AST 結構，我們只需要將想要解析的程式碼貼進紅框裡面：

就可以看到這段程式碼的資料結構與所有節點的資料內容：

還能看到該用什麼 API 才能產出這樣的程式碼：

如果想要知道某個區塊的 AST 資料與其結構，只要在該區塊的程式碼中點擊滑鼠左鍵，如：

它就會幫你 Highlight 出來相關的 AST 結構，讓你知道這個區塊的程式碼在整個 AST 的哪個位置：

旁邊的資料區塊也只會顯示該 AST 節點的資料：

是不是真的超強超好用的？！

本日結語

筆者今天調整了一下之前的內容，主要是把之前分享過的 TypeScript AST Viewer 拉過來跟今天介紹的另一個超好用工具 - Schematics Snippets 整理在一起，看起來會比較整齊一點。

超好用工具篇基本上就分享到這裡，而這些超好用工具都能夠大幅提昇各位在撰寫 Schematics 時、或是平常在使用 Schematics 時的效率，大家可以善加利用。

明天筆者將介紹如何開發可以給 Vue 、 React 使用的 Schematics 以及如何使用。

敬請期待！

參考資料