iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
Modern Web

從零開始的Angular前端開發系列 第 9

# DAY 9 善用 Extensions 進行開發

我們在介紹 Two-way Binding 時,需要 import FormsModuleAppModule 中:

我們用了很方便的提示字,建立程式碼的 Snippets,但這個 Snippets 的功能,其實是需要 VSCODE 的 Extensions 支援的。

用的很開心,但是忘記介紹。

我們打開 VSCODE 在右邊選這個四個方塊的 icon,打開 extensions 市集,搜尋 Angular

Angular 的套件非常多,而我是使用的是上面紅色框框中的 Augular Extension,作者是 Will 保哥。

這個套件中包含了許多 Angular 的擴充套件,簡單說就是一鍵懶人包。像我們之前介紹過的 editorconfig、TSLint 都有包含在裡面,所以我們安裝這個套件就好,其他套件都會幫我們安裝:

安裝完成後可能需要重新載入 VSCODE ,讓 extensions 生效,重載後,我們可以切到 html 檔案來測試一下新鮮的 Snippets 功能,假設我要使用 ngModel ,我先在前面打 a-,就會出現提示字:

那麼當我選 a-ngModel ,就會自動幫我產生 Snippets:

這樣可以大幅度降低寫錯語法的機率,以及開發上的效率。

另外若是在撰寫 TypeScript 的話,以 for-loop為例:

也可以很快速的新增一段 for-loop 的程式碼。

除此之外,我們剛剛安裝的一堆套件中還有一個 Angular Schematics。這個工具安裝完後會在 VSCODE 左邊多一個 Angular 的 icon :

以前我們要新增一個 Component 時,需要透過 Angular-CLI 下 ng generate component <component-name>,幫我們新增元件。

這個工具可以讓我們不需要下指令,也能建立 component、service 等元件,其效果與下 Angular-CLI 指令是一模一樣的。

這個工具在 VSCODE 的檔案目錄也起作用:

不過還是鼓勵初學者多多嘗試下指令的模式,過於依賴工具實在不太好,建議工具的使用跟下指令都要熟悉。沒事就下下command,有益身體健康。


上一篇
# DAY 8 Binding (二)
下一篇
# DAY 10 Directive - Component
系列文
從零開始的Angular前端開發30

尚未有邦友留言

立即登入留言