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

Contenu connexe

Tendances

GPUDirect RDMA and Green Multi-GPU Architectures
GPUDirect RDMA and Green Multi-GPU ArchitecturesGPUDirect RDMA and Green Multi-GPU Architectures
GPUDirect RDMA and Green Multi-GPU Architecturesinside-BigData.com
 
Grafana optimization for Prometheus
Grafana optimization for PrometheusGrafana optimization for Prometheus
Grafana optimization for PrometheusMitsuhiro Tanda
 
Linux-HA with Pacemaker
Linux-HA with PacemakerLinux-HA with Pacemaker
Linux-HA with PacemakerKris Buytaert
 
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, Uber
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, UberKafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, Uber
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, UberHostedbyConfluent
 
Cassandra Operations at Netflix
Cassandra Operations at NetflixCassandra Operations at Netflix
Cassandra Operations at Netflixgreggulrich
 
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC
 
Evolution of kube-proxy (Brussels, Fosdem 2020)
Evolution of kube-proxy (Brussels, Fosdem 2020)Evolution of kube-proxy (Brussels, Fosdem 2020)
Evolution of kube-proxy (Brussels, Fosdem 2020)Laurent Bernaille
 
Devops Porto - CI/CD at Gitlab
Devops Porto - CI/CD at GitlabDevops Porto - CI/CD at Gitlab
Devops Porto - CI/CD at GitlabFilipa Lacerda
 
Git Lab Introduction
Git Lab IntroductionGit Lab Introduction
Git Lab IntroductionKrunal Doshi
 
Armeriaworkshop2019 openchat julie
Armeriaworkshop2019 openchat julieArmeriaworkshop2019 openchat julie
Armeriaworkshop2019 openchat julieLINE+
 
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 Seoul
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 SeoulElastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 Seoul
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 SeoulSeungYong Oh
 
VictoriaMetrics 2023 Roadmap
VictoriaMetrics 2023 RoadmapVictoriaMetrics 2023 Roadmap
VictoriaMetrics 2023 RoadmapVictoriaMetrics
 
GIT presentation
GIT presentationGIT presentation
GIT presentationNaim Latifi
 
Monitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaMonitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaArvind Kumar G.S
 

Tendances (20)

GPUDirect RDMA and Green Multi-GPU Architectures
GPUDirect RDMA and Green Multi-GPU ArchitecturesGPUDirect RDMA and Green Multi-GPU Architectures
GPUDirect RDMA and Green Multi-GPU Architectures
 
Grafana optimization for Prometheus
Grafana optimization for PrometheusGrafana optimization for Prometheus
Grafana optimization for Prometheus
 
Git & GitLab
Git & GitLabGit & GitLab
Git & GitLab
 
Introduction to gradle
Introduction to gradleIntroduction to gradle
Introduction to gradle
 
Linux-HA with Pacemaker
Linux-HA with PacemakerLinux-HA with Pacemaker
Linux-HA with Pacemaker
 
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, Uber
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, UberKafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, Uber
Kafka Tiered Storage | Satish Duggana and Sriharsha Chintalapani, Uber
 
Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
 
Cassandra Operations at Netflix
Cassandra Operations at NetflixCassandra Operations at Netflix
Cassandra Operations at Netflix
 
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧
 
Evolution of kube-proxy (Brussels, Fosdem 2020)
Evolution of kube-proxy (Brussels, Fosdem 2020)Evolution of kube-proxy (Brussels, Fosdem 2020)
Evolution of kube-proxy (Brussels, Fosdem 2020)
 
Git and github
Git and githubGit and github
Git and github
 
Devops Porto - CI/CD at Gitlab
Devops Porto - CI/CD at GitlabDevops Porto - CI/CD at Gitlab
Devops Porto - CI/CD at Gitlab
 
Git Lab Introduction
Git Lab IntroductionGit Lab Introduction
Git Lab Introduction
 
Introduction git
Introduction gitIntroduction git
Introduction git
 
Git
GitGit
Git
 
Armeriaworkshop2019 openchat julie
Armeriaworkshop2019 openchat julieArmeriaworkshop2019 openchat julie
Armeriaworkshop2019 openchat julie
 
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 Seoul
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 SeoulElastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 Seoul
Elastic Stack 을 이용한 게임 서비스 통합 로깅 플랫폼 - elastic{on} 2019 Seoul
 
VictoriaMetrics 2023 Roadmap
VictoriaMetrics 2023 RoadmapVictoriaMetrics 2023 Roadmap
VictoriaMetrics 2023 Roadmap
 
GIT presentation
GIT presentationGIT presentation
GIT presentation
 
Monitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaMonitoring using Prometheus and Grafana
Monitoring using Prometheus and Grafana
 

En vedette

你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)Will Huang
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)Will Huang
 
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)Will Huang
 
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具Will Huang
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎Will Huang
 
Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanAzure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanWill Huang
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)Will Huang
 
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管SQL Server 資料庫版本控管
SQL Server 資料庫版本控管Will Huang
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Will Huang
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略Will Huang
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )Will Huang
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽Will Huang
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享Will Huang
 
簡介 GitHub 平台
簡介 GitHub 平台簡介 GitHub 平台
簡介 GitHub 平台Will Huang
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Will Huang
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用Will Huang
 
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革Will Huang
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技Will Huang
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWill Huang
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例Will Huang
 

En vedette (20)

你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
你所不知道的 Microsoft Azure 雲端資源採購技巧 (2016 Azure 新春特惠方案)
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
 
快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)快速上手 Windows Containers 容器技術 (Docker Taipei)
快速上手 Windows Containers 容器技術 (Docker Taipei)
 
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
《保哥線上講堂》打造一個具有 Linux 溫度的 Windows 命令提示字元工具
 
初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎初學者都該了解的 HTTP 通訊協定基礎
初學者都該了解的 HTTP 通訊協定基礎
 
Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 TaiwanAzure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
Azure Web App on Linux @ Global Azure Bootcamp 2017 Taiwan
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
 
Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰Visual Studio 2015 與 Git 開發實戰
Visual Studio 2015 與 Git 開發實戰
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
 
簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )簡介 Git hub 平台 ( 1.5 hrs )
簡介 Git hub 平台 ( 1.5 hrs )
 
開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽開發人員不可不知的 Windows Container 容器技術預覽
開發人員不可不知的 Windows Container 容器技術預覽
 
Growth Mindset 經驗分享
Growth Mindset 經驗分享Growth Mindset 經驗分享
Growth Mindset 經驗分享
 
簡介 GitHub 平台
簡介 GitHub 平台簡介 GitHub 平台
簡介 GitHub 平台
 
Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)Visual Studio 2017 新功能探索 (Study4.TW)
Visual Studio 2017 新功能探索 (Study4.TW)
 
git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用git merge 與 rebase 的觀念與實務應用
git merge 與 rebase 的觀念與實務應用
 
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
 
中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技中小企業選擇雲端服務的實戰密技
中小企業選擇雲端服務的實戰密技
 
Windows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, KubernetesWindows Container 101: dotNET, Container, Kubernetes
Windows Container 101: dotNET, Container, Kubernetes
 
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
使用 TypeScript 駕馭 Web 世界的脫韁野馬:以 Angular 2 開發框架為例
 

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

Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xBo-Yi Wu
 
a glance of Javascript module
a glance of Javascript modulea glance of Javascript module
a glance of Javascript modulezipeng zhang
 
和Android源代码一起工作 | 海豚浏览器 胡继堂
和Android源代码一起工作 | 海豚浏览器 胡继堂和Android源代码一起工作 | 海豚浏览器 胡继堂
和Android源代码一起工作 | 海豚浏览器 胡继堂imShining @DevCamp
 
Uc gui中文手册
Uc gui中文手册Uc gui中文手册
Uc gui中文手册호연 최
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshellNelson Tai
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Gelis Wu
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架Will Huang
 
Continuous integration
Continuous integrationContinuous integration
Continuous integrationnetdbncku
 
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure National Cheng Kung University
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & developmentXuefeng Zhang
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路luolonghao
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介Kito Cheng
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
Git 入門與實作
Git 入門與實作Git 入門與實作
Git 入門與實作奕浦 郭
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统klandor
 
Baidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log AnalysisBaidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log AnalysisXiaoming Chen
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2luolonghao
 

Similaire à 使用 Visual Studio Code 建構 JavaScript 應用程式 (20)

Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
a glance of Javascript module
a glance of Javascript modulea glance of Javascript module
a glance of Javascript module
 
Java - TA課 - 開發環境
Java - TA課 - 開發環境Java - TA課 - 開發環境
Java - TA課 - 開發環境
 
和Android源代码一起工作 | 海豚浏览器 胡继堂
和Android源代码一起工作 | 海豚浏览器 胡继堂和Android源代码一起工作 | 海豚浏览器 胡继堂
和Android源代码一起工作 | 海豚浏览器 胡继堂
 
Uc gui中文手册
Uc gui中文手册Uc gui中文手册
Uc gui中文手册
 
Git in a nutshell
Git in a nutshellGit in a nutshell
Git in a nutshell
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
 
Continuous integration
Continuous integrationContinuous integration
Continuous integration
 
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure
Accelerating or Complicating PHP execution by LLVM Compiler Infrastructure
 
Build Your Own Android Toolchain from scratch
Build Your Own Android Toolchain from scratchBuild Your Own Android Toolchain from scratch
Build Your Own Android Toolchain from scratch
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & development
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 
icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介icecream / icecc:分散式編譯系統簡介
icecream / icecc:分散式編譯系統簡介
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
Git 入門與實作
Git 入門與實作Git 入門與實作
Git 入門與實作
 
开源应用日志收集系统
开源应用日志收集系统开源应用日志收集系统
开源应用日志收集系统
 
Baidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log AnalysisBaidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log Analysis
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
 

Plus de Will Huang

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)Will Huang
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索Will Huang
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!Will Huang
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧Will Huang
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)Will Huang
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)Will Huang
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Will Huang
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點Will Huang
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門Will Huang
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)Will Huang
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)Will Huang
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Will Huang
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)Will Huang
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Will Huang
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Will Huang
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)Will Huang
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)Will Huang
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)Will Huang
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)Will Huang
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)Will Huang
 

Plus de Will Huang (20)

深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
 
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
使用 .NET 5 實現美股期貨的量化交易策略 (.NET Conf 2020)
 
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
實現 Angular, Docker 與 Kubernetes 持續部署 (NG+2020)
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
 
從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點從實戰經驗看到的 K8S 導入痛點
從實戰經驗看到的 K8S 導入痛點
 
RxJS 6 新手入門
RxJS 6 新手入門RxJS 6 新手入門
RxJS 6 新手入門
 
极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)极速 Angular 开发:效能调校技巧 (ngChina 2019)
极速 Angular 开发:效能调校技巧 (ngChina 2019)
 
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
你不可不知的 ASP.NET Core 3 全新功能探索 (.NET Conf 2019)
 
Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)Protractor: The Hacker way (NG-MY 2019)
Protractor: The Hacker way (NG-MY 2019)
 
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
邁向 Windows Server 應用程式現代化 (Windows Server Application Modernization)
 
Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)Angular 开发技巧 (2018 ngChina 开发者大会)
Angular 开发技巧 (2018 ngChina 开发者大会)
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
利用.NET Core 與 Azure Kubernetes Service (AKS) 建立高彈性 Microservices (Azure TechDay)
 
AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)AKS 與開發人員體驗 (Kubernetes 大講堂)
AKS 與開發人員體驗 (Kubernetes 大講堂)
 
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
使用 ASP.NET Blazor 開發 SPA 網頁應用程式 (.NET Conf 2018)
 
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術 及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
 

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

  • 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