VS Code 與 Angular2 搭配下的開發環境建置[原創] @ MorseCheng的部落格

假設我們並沒有使用過 VS Code 的狀態下,我們

1.安裝 VS Code

你可以在 https://code.visualstudio.com/ 找到安裝程式, 下載後將它裝起來。

2.設置 C# 擴充功能

裝好 VS Code 之後,我們要先讓 VS Code 支援 C#, 作法是先執行 VS Code, 進入畫面後點選在左側的最下一個圖示 [擴充功能] , 畫面上就會列出很多支援的工具程式, 您可以在上方的搜索文字方塊中輸入 C#,
就可以看到 [C# for Visual Studio Code], 就是它了, 把它安裝起來。

3.設置調試器(Debugger)擴充功能

接下來您要找一個調試器(Debugger), 您可以用剛才的方法找到 Debugger for Chrome , 把它也安裝起來。

4.開啟終端機模式
按下 Ctrl-` (Esc鍵下面的段單引號)就可以在畫面中出現終端機(命令模式)的畫面。

5.檢查版本及執行的環境
在終端機輸入 dotnet --info, 就可以檢查版本及執行的環境, 如下:

PS D:\project\> dotnet --info
.NET 命令列工具 (2.1.4)

   Product Information:
   Version: 2.1.4
   Commit SHA-1 hash: 5e8add2190

   Runtime Environment:
   OS Name: Windows
   OS Version: 10.0.16299
   OS Platform: Windows
   RID: win10-x64
   Base Path: C:\Program Files\dotnet\sdk\2.1.4\

Microsoft .NET Core Shared Framework Host

Version : 2.0.5
Build : 17373eb129b3b05aa18ece963f8795d65ef8ea54

6.版本升級
如果您的版本太舊時, 可以在終端機輸入 dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
稍等一會兒就可以更新好了

7.建立新專案
步驟如下:(在終端機輸入)
md \project
cd \project
dotnet new angular
dotnet restore
npm install

執行以上的命令就可以建立新專案了, 您可以在VS Code 畫面左側的第一個圖示[檔案總管], 查看到您建立的專案內容。

8.專案參數設定
檔案總管中的第一個目錄是.vscode, 展開後還需會有一支 launch.json 檔案, 這就是專案的參數檔將它打開內容如下:

   {
       // 使用 IntelliSense 以得知可用的屬性。
       // 暫留以檢視現有屬性的描述。
       // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
       "version": "0.2.0",
       "configurations": [
           {
               "type": "node",
               "request": "launch",
               "name": "啟動程式",
               "program": "${file}"
           }
       ]
   }

參數中的 program 是啟動的 javascript 程式, 您必須自行修改成您的啟動程式
例如:
"program": "${workspaceFolder}/app.js"

就是以專案工作目錄下的app.js為啟動程式, 設定好了就可以在專案工作目錄下寫一支程式(app.js)
例如:
console.log("Hello...");

9.編譯專案
參數設定好了, 程或是準備好了, 接著就可以執行看看了, 在執行我們程式之前我們先要將專案進行編譯,在終端機輸入:

dotnet build

就可以完成專案的編譯

10.執行專案
專案完成編譯後, 您只要按下 F5 就可以執行專案了