iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
1
Modern Web

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

[高效 Coding 術:Angular Schematics 實戰三十天] Day19 - 超好用工具分享之 VSCode 的 Angular Schematics 擴充套件介紹與應用

今天筆者要來分享一個超好用的 VSCode 擴充套件給大家:

Imgur

這個擴充套件好用在哪裡呢?

  • 減少因打錯字所浪費的時間。
  • 不用再自己搜尋指令或參數,它會幫你全部列出來。
  • 可以整合客製的 Schematics 進去,不管是已發佈的還是未發佈的。
  • 自動開啟產生出來的文件

需特別留意的是,此擴充套件只支援 Angular 5 以上的專案。

使用方式

有以下四種方式可以觸發

  1. 直接在檔案目錄上按右鍵。如:

Imgur

  1. 點擊側邊欄的專屬 icon 。如:

Imgur

如果沒有看到此 icon ,表示該專案不是 Angular 5 以上的專案。

  1. 輸入指令,如:

Imgur

  1. 設定快捷鍵觸發,如:

Imgur

預設支援的 Schematics 項目

這個套件預設支援以下 Schematics 項目(專案要安裝該套件):

  • @schematics/angular
  • @angular/material
  • @ionic/angular-toolkit
  • @ngrx/schematics
  • @nrwl/schematics
  • @nstudio/schematics
  • @ngxs/schematics
  • @nativescript/schematics
  • @ngx-formly/schematics
  • primeng-schematics
  • @ngx-kit/collection
  • ngx-spec

整合客製的 Schematics

除了上述的 Schematics 之外,我們也可以將自己客製的 Schematics ,抑或者是不再上述清單中的 Schematics 一併整合進這個套件裡。

套件提供的整合方式有以下兩種:

  1. 使用套件的預設路徑。
  2. 在偏好設定中新增路徑。

使用套件的預設路徑

./schematics/collection.json 這個路徑是套件本身預先設定好的,只要將 Schematics 的 collection.json 放在 ./schematics 底下,套件就會自動去解析它。

在偏好設定中新增路徑

除了使用預設路徑之外,我們也可以在 VSCode 的偏好設定裡搜尋此套件的設定,並加入 Schematics 的 collection.json 實際所在位置的路徑以提供給套件解析。

拿昨天我們實戰練習的範例來說,該專案實際的 Schematics 路徑其實是 ./projects/my-library/schematics/collection.json (從專案根目錄開始算),所以我們只需要打開 VSCode 的偏好設定,搜尋 schematics ,然後把該路徑新增進去即可。

如:

Imgur

除了透過 UI 加入之外 當然也可以直接打開 settings.json ,並直接加入 "ngschematics.schematics": ["./path/to/collection.json"] 之設定。

如:

Imgur

另外,除了路徑之外,如果你的 Schematics 是透過 npm 下載的,可以直接透過上述方式直接把該 Package 的名稱加入,這個套件一樣能解析。

如:

Imgur

完成設定後,記得重啟 VSCode 讓套件重新解析。

本日結語

雖然套件作者提供了四種啟動的方式,不過作者跟筆者都建議大家直接使用直接在目錄上點擊滑鼠右鍵的方式,因為套件會自動解析其路徑位置,避免打錯字造成的時間浪費。

明天筆者將會分享另一個超好用的工具給大家,敬請期待!

參考資料


上一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day18 - 將 Schematics 整合進你的 Angular 專案裡
下一篇
[高效 Coding 術:Angular Schematics 實戰三十天] Day20 - 超好用工具分享之 TSQuery
系列文
高效 Coding 術:Angular Schematics 實戰三十天32

尚未有邦友留言

立即登入留言