iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

高效 Coding 術:Angular Schematics 實戰三十天系列 第 22

[高效 Coding 術:Angular Schematics 實戰三十天] Day21 - 超好用工具分享之 Schematics Snippets 和 TypeScript AST Viewer

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

Schematics Snippets

Imgur

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

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

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

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

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

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

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

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

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

TypeScript AST Viewer

Imgur

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

Imgur

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

Imgur

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

Imgur

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

Imgur

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

Imgur

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

Imgur

是不是真的超強超好用的?!

本日結語

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

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

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

敬請期待!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day20 - 超好用工具分享之 TSQuery
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day22 - 與 React 共舞
系列文
高效 Coding 術:Angular Schematics 實戰三十天32

尚未有邦友留言

立即登入留言