Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

13,586 views

Published on

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

Published in: Software
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.HelpWriting.net ⇐ and place your order
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My brother found Custom Writing Service ⇒ www.HelpWriting.net ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

使用 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

×