Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

使用 Visual Studio Code 建構 JavaScript 應用程式

12 486 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

使用 Visual Studio Code 建構 JavaScript 應用程式

  1. 1. 使用 Visual Studio Code 建構 JavaScript 應用程式 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. 認識 Visual Studio Code The Visual Studio Code
  3. 3. Visual Studio Code ( VSCode ) • 免費的程式碼編輯器 ( Code Editor ) • 用來建置與偵錯 Web 與 Cloud 應用程式 • 真正跨平台 ( Linux, Mac OSX, Windows) • 完全以 TypeScript 與 Electron 打造而成 3
  4. 4. 使用 VSCode 的重要觀念 • 編輯器 (Editor) – 同時最多開啟 3 個編輯器 – 支援程式碼片段 (Snippets) • 控制命令 (Commands) – 所有 GUI 操作的背後都是轉換成控制命令 – 許多控制命令都包含相對應的鍵盤快速鍵 • 工作區 / 專案資料夾 (Workspace) – 目前 VSCode 的控管範圍 (資料夾) – 可針對目前工作區進行偏好設定 ( .vscode ) 4
  5. 5. VSCode 編輯器環境介紹 • 主選單 (Menu) • 側邊攔 (Sidebar) • 編輯器視窗 (Editors) • 狀態列 (Status Bar) 5
  6. 6. 主選單 (Menu) • File 檔案 – Auto Save 啟用自動儲存 – Preferences 偏好設定 • Edit 編輯 • View 檢視 • Goto 前往 • Help 說明 – Toggle Developer Tools 6
  7. 7. 側邊攔 (Sidebar) 的四種檢視 • 支援四種不同檢視窗格(Views) – EXPLORE 專案總管 ( Ctrl+Shift+E ) – SEARCH 全域搜尋 ( Ctrl+Shift+F ) – GIT 版本控管 ( Ctrl+Shift+G ) – DEBUG 應用程式偵錯( Ctrl+Shift+D ) • 可用 Ctrl+B 開關檢視窗格 7
  8. 8. EXPLORE (專案總管) • 編輯中檔案 – WORKING FILES – 可啟用自動儲存 • 工作區檔案 – 開啟到分割視窗 – 開啟檔案總管 – 開啟命令提示字元 – 選取檔案比對 – 複製/貼上檔案 – 複製檔案路徑 – 更名/刪除檔案 8
  9. 9. EXPLORE (專案總管) • 開啟檔案 – Click • 開啟檔案在 "左編輯器" ( Editor 1 ) – Ctrl+Click • 開啟檔案在 "右編輯器" ( Editor 2 ) • 切換編輯器視窗的快速鍵 – Ctrl + 0 切換到檢視窗格 – Ctrl + 1 , Ctrl + 2 指定切換到編輯器視窗 – Ctrl + ` 輪流切換編輯器視窗 – Ctrl + W 關閉編輯器視窗 9
  10. 10. SEARCH (全域搜尋) • 搜尋工作區內所有檔案內容 – 支援 Regular Expression – 支援 Node Glob Pattern ( e.g. **/*.js ) 10
  11. 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. 12. DEBUG (專案偵錯) • 支援 Node.js 與 ASP.NET 5 (Mono) 開發與偵錯 • 設定 (Configure) • 主控台 (Open Console) • 即時變數 (VARIABLES) • 監看式 (WATCH) • 呼叫堆疊 (CALL STACK) • 中斷點 (BREAKPOINTS) 12
  13. 13. 編輯器視窗 (Editors) • 智慧標籤整合常見動作 – Ctrl+. • 更智慧的 Intellisense – 背景執行 TypeScript 型別檢查 (看懂你的Code) • 內建 JavaScript 語法與語意檢查 – 也可換成 jshint 或 eslint – 會自動讀取 .jshintrc 設定檔 13
  14. 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. 15. VSCode 命令面板 • 快速開啟 Ctrl+P 或 Ctrl+E – 輸入 ? 查詢各種用法 – 查詢與執行命令 Ctrl+Shift+P – 查詢錯誤與警示 Ctrl+Shift+M 15
  16. 16. 開發 Node.js 應用程式 Developing Node.js Using Visual Studio Code
  17. 17. 建立 Node.js 專案環境 • yo express • gulp develop • npm install eslint --save-dev • npm install jshint --save-dev 17
  18. 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. 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. 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. 21. 優化 VSCode 程式碼編輯環境 1. 自訂編輯器外觀 – [File] / [Preferences] / [Color Theme] 2. 工作區偏好設定 – [File] / [Preferences] / [User Settings] – [File] / [Preferences] / [Workspace Settings] 3. 開啟自動儲存 (Auto Save) 21
  22. 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. 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. 24. 開發 AngularJS 應用程式 Developing AngularJS Using Visual Studio Code
  25. 25. 建立 AngularJS 開發環境 • 建立一個空資料夾 • 使用 VSCode 開啟該資料夾 – code . • 建立 index.html – ! – cdnjquery – cdnangular – cdnbootstrap – 套用 ng-app="app" • 建立 main.js – ngmodule 25
  26. 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. 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

×