# 如何用 Visual Studio Code 開發 AngularJS 應用程式

[Visual Studio Code](https://code.visualstudio.com/) 的出現帶給許多人震撼，但是嚴格說起來，Visual Studio Code 並不能算是一個 IDE (整合開發環境)，更精確地來說，他就是一個編輯器 (Editor)，只是多了一些 IDE 的功能而已。今天我打算來分享如何有效率的使用 Visual Studio Code 來開發 AngularJS 應用程式，有些小技巧可以學習一下。

### 準備練習環境

我們先從 [AngularJS 官網](https://angularjs.org/) 連到 [angular-seed](https://github.com/angular/angular-seed) 專案，並且透過 git 將專案複製回來，最後可以直接在命令提示字元直接用 **code .** 開啟此目錄，請參考以下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/130a84bdbae6aee44e5d-image_2696.png)

git clone https://github.com/angular/angular-seed.git

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/92ef57fa7e421d41b7c0-image_2697.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/34b2cc43443efec16af1-image_2698.png)

### 體驗 Visual Studio Code 的編輯器功能

在 HTML (View) 中，其實 Visual Studio Code 已經內建了 AngularJS 的 Intellisense 功能，直接在任意標籤上新增屬性時輸入 **ng** 二字，即可自動出現 AngularJS 的 directives 提示，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9da8d2995f3931a6fd57-image_2699.png)

如果你打開 **app/app.js** 檔案的話，你會發現 Visual Studio Code 並沒有針對 JavaScript 部分提供 Intellisense 功能，但還是會提示你找不到 angular 變數的定義，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/67854983da4d0b7a99e2-image_2700.png)

了解 [TypeScript](http://www.typescriptlang.org/) 的人就知道，其實 Visual Studio Code 預設把所有 **\*.js** 都當成 **\*.ts** 來看了，也就是只要你安裝了 AngularJS 或其他第三方函式庫的 [TypeScript 定義檔](http://www.typescriptlang.org/Handbook#writing-dts-files) (declaration file) (\*.d.ts)，就等於告訴 Visual Studio Code 編輯器可以認得 **angular** 或其他全域變數的型別定義，也就會讓 Visual Studio Code 支援 JavaScript 的 Intellisense 功能。

TypeScript 有個 [DefinitelyTyped](http://definitelytyped.org/) 網站，代管了非常大量的 [TypeScript 定義檔](http://www.typescriptlang.org/Handbook#writing-dts-files)，許多知名的第三方函式庫或框架都可以在這個網站找到：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/cd0f8f4b1c619062dfe6-image_2701.png)

如果你使用 Visual Studio 2013 的話，大部分 TypeScript 定義檔都可以透過 NuGet 自動安裝與更新，但如果用 Visual Studio Code 的話，你可以利用 [TSD (TypeScript Definition manager)](https://github.com/typings/typings) 命令列工具來幫你自動安裝：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f9a3a99b3e881d68a9f3-image_2702.png "image")

你可以很簡單的透過 [npm](https://www.npmjs.com/) 安裝 tsd 命令列工具：

npm install tsd -g

裝好之後我們就可以開始使用 tsd 幫我們安裝 TypeScript 定義檔，以下是使用方式：

1.  初始化 TSD 設定檔，輸入 **tsd init** 他會自動幫你建立兩個檔案分別是 **tsd.json** 與 **typings\\tsd.d.ts**  
    **tsd init  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4784581273a520bcf8ba-image_2703.png)**  
    
2.  接著安裝 angular 相關的 TypeScript 定義檔  
    **tsd install angularjs/ --resolve --save  
    **上述指令的補充說明如下：
    
    -    **angularjs/** 代表所有 angularjs 分類下的所有定義檔
    -   **\--resolve** 則是依並安裝「相依的」定義檔，上述指令會連同 jquery 的定義檔一併安裝完成
    -   **\--save** 則是要將本次安裝的 .d.ts 檔案自動加入到 **typings\\tsd.d.ts** 檔案
    
      
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0d635cb63cb0cef66eaa-image_2704.png)   
      
    ※ 如果你有做測試，或許你也會想安裝 jasmine, angular-protractor 這兩個 TypeScript 定義檔：  
      **tsd instll jasmine angular-protractor --resolve**  
         備註：以上指令不加上 **\--save** 參數主要是因為這兩個套件通常只有在特定的 .js 檔案才會需要加入參考，所以預設我不會把他加入到 **typings\\tsd.d.ts** 檔案  
      
    我要特別提及 **typings\\tsd.d.ts** 這個檔案，這個檔案主要用來加入各種不同 TypeScript 定義參考，若要在 Visual Studio Code 啟用 JavaScript Intellisense 功能，只要引用這個檔案就可以把所有相關的 TypeScript 定義一併載入。  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/07817edca06c9a9bc363-image_2705.png)  
    
3.  加入 TypeScript 定義參考到 **app/app.js** 中  
    你可以先在檔案最上方先輸入 **reference** 字樣，然後按下 **Tab** 自動完成 (Autocomplete)  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b822c63483333eae56c6-image_2706.png)  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/955fb44263ff595de137-image_2707.png)  
    然後輸入 **../typ** 就可以了，因為 Visual Studio Code 會自動跳出檔名路徑的提示，你一樣按下 **Tab** 就可以完成輸入，然後你就可以立即看到 angular 底下的綠色曲線消失了，你將滑鼠移過去還會出現 **angular.d.ts** 中定義的型別定義提示：  
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3e7821850323e18fcc11-image_2708.png "image")  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/944957586f8e6956f26e-image_2709.png)  
    
4.  接下來，你就照常寫 angular 程式，這時你就會發現寫 Code 的同時就會提示你該方法要怎麼用，連 Angular Service 自動注入的變數也都會有 Intellisense 提示：  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/c883eaa4e0b101b185dc-image_2710.png)  
    ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b8614703bb42bf3fc66a-image_2711.png)  
    

雖然有 Intellisense 還不錯，但 Code Snippet 如果有的話會更好不是嗎！

大家有空的話就到 [Code Snippet Support – Visual Studio](https://web.archive.org/web/20151222061504/https://visualstudio.uservoice.com/forums/293070-visual-studio-code/suggestions/7758156-code-snippet-support) 投票這個功能吧！ ;-)

**相關連結**

-   [Getting Started with Angular and Visual Studio Code - Visual Studio Code](https://web.archive.org/web/20150607200805/http://blogs.msdn.com:80/b/vscode/archive/2015/05/22/getting-started-with-angular-and-visual-studio-code.aspx)
-   [Intellisense with Visual Studio Code | John Papa](http://www.johnpapa.net/intellisense-witha-visual-studio-code/)
-   [Visual Studio Code](https://code.visualstudio.com/)
-   [Visual Studio Code - MSDN Blogs](https://code.visualstudio.com/blogs)
-   [angular/angular-seed](https://github.com/angular/angular-seed)
-   [TSD - TypeScript Definition manager for DefinitelyTyped](https://github.com/typings/typings)