如何用Visual Studio Code 開發AngularJS 應用程式 | angular vscode
VisualStudioCode[1]的出現帶給許多人震撼,但是嚴格說起來,VisualStudioCode並不能算是一個IDE(整合開發環境),更精確地來說,他就是一個編輯器(Editor),只是多了一些IDE的功能而已。今天我打算來分享如何有效率的使用VisualStudioCode來開發AngularJS應用程式,有些小技巧可以學習一下。準備練習環境我們先從AngularJS官網[2]連到angular-seed[3]專案,並且透過git將專案複製回來,最後可以直接在命令提示字元直接用code.開啟此目錄,請參考以下圖示:gitclonehttps://github.com/angular/angular-seed.git 體驗VisualStudioCode...
Visual Studio Code[1] 的出現帶給許多人震撼,但是嚴格說起來,Visual Studio Code 並不能算是一個 IDE (整合開發環境),更精確地來說,他就是一個編輯器 (Editor),只是多了一些 IDE 的功能而已。今天我打算來分享如何有效率的使用 Visual Studio Code 來開發 AngularJS 應用程式,有些小技巧可以學習一下。
準備練習環境我們先從 AngularJS 官網[2] 連到 angular-seed[3] 專案,並且透過 git 將專案複製回來,最後可以直接在命令提示字元直接用 code . 開啟此目錄,請參考以下圖示:
git clone https://github.com/angular/angular-seed.git
體驗 Visual Studio Code 的編輯器功能
在 HTML (View) 中,其實 Visual Studio Code 已經內建了 AngularJS 的 Intellisense 功能,直接在任意標籤上新增屬性時輸入 ng 二字,即可自動出現 AngularJS 的 directives 提示,如下圖示:
如果你打開 app/app.js 檔案的話,你會發現 Visual Studio Code 並沒有針對 JavaScript 部分提供 Intellisense 功能,但還是會提示你找不到 angular 變數的定義,如下圖示:
了解 TypeScript[4] 的人就知道,其實 Visual Studio Code 預設把所有 *.js 都當成 *.ts 來看了,也就是只要你安裝了 AngularJS 或其他第三方函式庫的 TypeScript 定義檔[5] (declaration file) (*.d.ts),就等於告訴 Visual Studio Code 編輯器可以認得 angular 或其他全域變數的型別定義,也就會讓 Visual Studio Code 支援 JavaScript 的 Intellisense 功能。
TypeScr...