這份是 Will 保哥在 JSDC.tw 2015 的演講簡報，介紹 Visual Studio Code 的基本架構與使用方式，並現場展示如何有效率的使用 Visual Studio Code 開發 Node.js 與 AngularJS 應用程式。

1. 使用 Visual Studio Code
建構 JavaScript 應用程式
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. 認識 Visual Studio Code
The Visual Studio Code

3. Visual Studio Code ( VSCode )
• 免費的程式碼編輯器 ( Code Editor )
• 用來建置與偵錯 Web 與 Cloud 應用程式
• 真正跨平台 ( Linux, Mac OSX, Windows)
• 完全以 TypeScript 與 Electron 打造而成
3

4. 使用 VSCode 的重要觀念
• 編輯器 (Editor)
– 同時最多開啟 3 個編輯器
– 支援程式碼片段 (Snippets)
• 控制命令 (Commands)
– 所有 GUI 操作的背後都是轉換成控制命令
– 許多控制命令都包含相對應的鍵盤快速鍵
• 工作區 / 專案資料夾 (Workspace)
– 目前 VSCode 的控管範圍 (資料夾)
– 可針對目前工作區進行偏好設定 ( .vscode )
4

5. VSCode 編輯器環境介紹
• 主選單 (Menu)
• 側邊攔 (Sidebar)
• 編輯器視窗 (Editors)
• 狀態列 (Status Bar)
5

6. 主選單 (Menu)
• File 檔案
– Auto Save 啟用自動儲存
– Preferences 偏好設定
• Edit 編輯
• View 檢視
• Goto 前往
• Help 說明
– Toggle Developer Tools
6

7. 側邊攔 (Sidebar) 的四種檢視
• 支援四種不同檢視窗格(Views)
– EXPLORE 專案總管 ( Ctrl+Shift+E )
– SEARCH 全域搜尋 ( Ctrl+Shift+F )
– GIT 版本控管 ( Ctrl+Shift+G )
– DEBUG 應用程式偵錯( Ctrl+Shift+D )
• 可用 Ctrl+B 開關檢視窗格
7

8. EXPLORE (專案總管)
• 編輯中檔案
– WORKING FILES
– 可啟用自動儲存
• 工作區檔案
– 開啟到分割視窗
– 開啟檔案總管
– 開啟命令提示字元
– 選取檔案比對
– 複製/貼上檔案
– 複製檔案路徑
– 更名/刪除檔案 8

9. EXPLORE (專案總管)
• 開啟檔案
– Click
• 開啟檔案在 "左編輯器" ( Editor 1 )
– Ctrl+Click
• 開啟檔案在 "右編輯器" ( Editor 2 )
• 切換編輯器視窗的快速鍵
– Ctrl + 0 切換到檢視窗格
– Ctrl + 1 , Ctrl + 2 指定切換到編輯器視窗
– Ctrl + ` 輪流切換編輯器視窗
– Ctrl + W 關閉編輯器視窗
9

10. SEARCH (全域搜尋)
• 搜尋工作區內所有檔案內容
– 支援 Regular Expression
– 支援 Node Glob Pattern ( e.g. **/*.js )
10

11. GIT (版本控管)
• 支援大部分 Git 常見操作
– git init (Initialize git repository)
– git add (Stage)
– git rm --cached (Unstage)
– git clean (Clean)
– git commit (Commit Staged)
– git commit -a (Commit All)
– git pull (Pull)
– git push (Push)
– git pull & git push (Sync)
– git reset --soft HEAD^ (Undo Last Commit)
11

12. DEBUG (專案偵錯)
• 支援 Node.js 與 ASP.NET 5 (Mono) 開發與偵錯
• 設定 (Configure)
• 主控台 (Open Console)
• 即時變數 (VARIABLES)
• 監看式 (WATCH)
• 呼叫堆疊 (CALL STACK)
• 中斷點 (BREAKPOINTS)
12

13. 編輯器視窗 (Editors)
• 智慧標籤整合常見動作
– Ctrl+.
• 更智慧的 Intellisense
– 背景執行 TypeScript 型別檢查 (看懂你的Code)
• 內建 JavaScript 語法與語意檢查
– 也可換成 jshint 或 eslint
– 會自動讀取 .jshintrc 設定檔
13

14. 狀態列 (Status Bar)
• 切換 Git 分支 (Git Checkout)
• 檢查檢查錯誤與警示 (Errors and Warnings)
• 游標位置資訊 (Go to Line)
• 設定檔案編碼 (Select Encoding)
– Reopen with Encoding
– Save with Encoding
• 選擇換行符號 (Select End of Line Sequence)
• 選擇語言模式 (Select Language Mode)
• 意見回饋 (Feedbacks) 14

15. VSCode 命令面板
• 快速開啟 Ctrl+P 或 Ctrl+E
– 輸入 ? 查詢各種用法
– 查詢與執行命令 Ctrl+Shift+P
– 查詢錯誤與警示 Ctrl+Shift+M 15

16. 開發 Node.js 應用程式
Developing Node.js Using Visual Studio Code

17. 建立 Node.js 專案環境
• yo express
• gulp develop
• npm install eslint --save-dev
• npm install jshint --save-dev
17

18. 開始使用 VSCode
1. 建立 Git 版本庫
2. 程式起點: bin/www
3. 主要程式: app.js
4. 啟動 Node.js 程式: F5
5. 編輯 .vscode/launch.json 設定檔
6. 建立新版本 (加入 launch.json 設定檔)
7. 啟動 Node.js 程式: F5
8. 開啟網頁: http://localhost:3000/
9. 中斷點/監看式/呼叫堆疊/單步執行
18

19. 執行 Gulp / Grunt 工作
1. 開啟 VSCode 命令面板
– Ctrl+E 或 Ctrl+P
2. 輸入 task 加一個空白鍵
– VSCode 會自動讀取 Gulp 或 Grunt 的工作定義檔
– 執行工作時會自動顯示 Output 視窗在編輯器右側
– 記得要先用 npm 安裝 gulp 或 grunt-cli 套件
• npm install -g gulp
• npm install -g grunt-cli
3. 常用快速鍵提醒
– 輸入 Ctrl+W 關閉目前的編輯器視窗
– 輸入 Ctrl+` 可以在不同的編輯器視窗之間切換
19

20. 錯誤提示與智慧標籤
1. 檢查程式錯誤與警示
– Ctrl+Shift+M
– [View] / [Erros and Warnings…]
2. 使用智慧標籤 (Smart Tag)
– Mark 'process' as global
– Download type definition node.d.ts
• 檢查 typings 資料夾
20

21. 優化 VSCode 程式碼編輯環境
1. 自訂編輯器外觀
– [File] / [Preferences] / [Color Theme]
2. 工作區偏好設定
– [File] / [Preferences] / [User Settings]
– [File] / [Preferences] / [Workspace Settings]
3. 開啟自動儲存 (Auto Save)
21

22. 使用程式碼片段 (Snippets)
1. 編輯 User Snippets 設定檔
– [File] / [Preferences] / [User Snippets]
– 選擇 JavaScript 並加入 requires 程式碼片段
2. 載入 http 模組
– var http = require('http'); 22
"require": {
"prefix": "require",
"body": [
"var ${moduleName} = require('${moduleName}');",
"$0"
],
"description": "node.js require module snippet"
}

23. 體驗更多 Git 版本控管功能
• Git 常見操作
– git init (Initialize git repository)
– git add (Stage)
– git rm --cached (Unstage)
– git clean (Clean)
– git commit (Commit Staged)
– git commit -a (Commit All)
– git pull (Pull)
– git push (Push)
– git pull & git push (Sync)
– git reset --soft HEAD^ (Undo Last Commit)
23

24. 開發 AngularJS 應用程式
Developing AngularJS Using Visual Studio Code

25. 建立 AngularJS 開發環境
• 建立一個空資料夾
• 使用 VSCode 開啟該資料夾
– code .
• 建立 index.html
– !
– cdnjquery
– cdnangular
– cdnbootstrap
– 套用 ng-app="app"
• 建立 main.js
– ngmodule 25

26. 啟動開發伺服器
• 進入命令提示字元
– Ctrl+Shift+C
• 啟動 browser-sync
– browser-sync start --server --files="*"
• 開發 AngularJS 應用程式
– 請參考 Angular Style Guide
– 建立 Angular Directive
• ngdirective
• 建立 partials/myName.htm 當成 directive 的 HTML 範本
– 建立 Angular Factory
• ngfactory
26

27. 聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang