Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Visual Studio Code
快速上⼿手指南
2016/05/28
范聖佑	
  Shengyou	
  Fan
Laravel	
  ⾼高雄社群⼩小聚
范聖佑
@shengyou
http://shengyoufan.com
https://www.facebook.com/shengyoufan
得寬科技 研究員
Laravel 台灣 傳教士
Laravel 道場 作者
該⽤用 Editor 還是 IDE?
IDEEditor
Editor 以上、IDE 未滿
Visual Studio Code
• 由 Microsoft 主導開發的編輯器
• 以 Electron 技術打造
• 內建語法提⽰示、版本控制及偵
錯⼯工具
• 跨平台、免費、開放源始碼
• ⽀支援外掛系統,可擴充功能
⺫⽬目前正式發佈 ...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
綜覽VS Code
• 安裝VS Code
• 基礎操作
• 版本控制
• 客製化選項
• PHP 開發整合
安裝VS Code
- 安裝.啟動.更新 -
Visual	
  Studio	
  Code	
  簡易上⼿手指南
系統需求
• 硬體
- 1.6 GHz CPU 以上
- 1GB 記憶體 (!)
- 200 MB 硬碟空間
• 平台
- Windows 7 以上 + .NET Fram...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
下載並安裝
• Windows
- 下載 .exe 檔後下⼀一步到底
• Mac
- 下載 .dmg 檔後把 .app 拖曳到應⽤用程式資料夾
• Linux
- 下載安裝...
⼯工作區
Viewbar
Editor
Sidebar
Statusbar
Visual	
  Studio	
  Code	
  簡易上⼿手指南
安裝指令列⼯工具
• Windows
- 安裝完⾃自動就會將 code 加⼊入環境變數
• Mac
- 打開 Command Palette,輸⼊入安裝指令
• Linux...
Command Palette
⌘+⇧+P
Visual	
  Studio	
  Code	
  簡易上⼿手指南
從指令列啟動
• 先開啟 Terminal 應⽤用程式
• 切換⼯工作⺫⽬目錄
• 使⽤用 code 全域指令開啟
$	
  cd	
  ~/Code
$	
  code	...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
切換語系
• VS Code 預設會⽤用系統語系做為介⾯面語系
• 內建已有繁體中⽂文語系
• 但…建議切換成英⽂文版 (!)
• 先 ⌘ + ⇧ + P 再輸⼊入 lan...
⾃自動更新
⾃自動更新提⽰示
基礎操作
- 編輯.視窗.設定 -
Visual	
  Studio	
  Code	
  簡易上⼿手指南
開啟/編輯檔案
• 從下拉式選單開啟對話框開檔
• 從 Sidebar 點選檔案列表,開啟在右邊 Editor 區塊
• ⌘ + P 輸⼊入檔名,依檔名模糊⽐比對後選擇
•...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
視窗操作
• ⌘ +  切分將現有視窗
• 在 Sidebar 對檔名按 ⌘ + Click,於分割視窗開啟
• ⌘ + 1~3 切換⼯工作視窗
Visual	
  Studio	
  Code	
  簡易上⼿手指南
選取與跨欄編輯
• 快速選取
- ⌘ + D 選取相同字串
• 跨欄編輯
- ⌥ + Click 跳點選取
- ⇧ + ⌥ + Click 跨欄選取
- ⌘ + ⌥ + ↑...
使⽤用者設定
Visual	
  Studio	
  Code	
  簡易上⼿手指南
⾃自動存檔
• 讓檔案⾃自動存檔,不⽤用⼀一直按 ⌘ + S
{	
  
	
  	
  	
  	
  //	
  Controls	
  auto	
  save	
 ...
版本控制
- 整合 -
Visual	
  Studio	
  Code	
  簡易上⼿手指南
• VS Code 預設使⽤用 PATH 裡的 git,因此要先裝 git
• 若是不想⽤用 PATH 裡的,可以指定路徑
客製化 git 設定
{	
  
	
  	
 ...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
git 設定
• ⾸首次使⽤用前,該設定的 git 使⽤用者設定別忘了!
$	
  git	
  config	
  -­‐-­‐global	
  user.name	
...
初始化
• 先⽤用VS Code 開啟專案
資料夾
• 切換到 git 側邊欄
• 點選初始化
$	
  git	
  init
將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$	
  git	
  add	
  .
將檔案放⼊入 Stage 區
• 按加號
- 可將所有未追蹤的⼀一
次加⼊入 Stage 區
- 也可以針對單⼀一檔案
加⼊入 Stage 區
• 按減號
- 執⾏行反向動作
$	
  git	
  add	
  .
提交版本
• 確認加⼊入 Stage 區的檔
案內容
• 輸⼊入提交訊息
• 按下打勾按鈕確認提交

(快速鍵 ⌘ + Enter)
$	
  git	
  commit	
  -­‐m
邊欄提⽰示
• 編輯檔案時會⾃自動在邊
欄提⽰示該⾏行的變更
- 綠⾊色光條:新增
- 藍⾊色光條:修改
- 紅⾊色箭頭:刪除
$	
  git	
  diff
檔案⽐比對
$	
  git	
  diff	
  {file}
檔案狀態
• 切換到 git 側邊欄時,
可顯⽰示專案資料夾內各
檔案的狀態
- 紅⾊色 D:刪除
- 綠⾊色 A:新增
- 灰⾊色 U:未追蹤
- 藍⾊色 M:修改
$	
  git	
  status
還原檔案
• 當滑⿏鼠移上⾄至檔案時,
可以點選還原按鈕,就
可以將檔案回復成未修
改前的版本
$	
  git	
  checkout
直接下 git 指令
可⽤用快速鍵 ⌘ + ⇧ + P
開啟 Command Palette
即可直接下 git 指令
客製化
- 佈景主題.快速鍵.擴充 -
佈景主題
先 ⌘+⇧+P 再輸⼊入 theme
佈景主題
切換不同主題,即時預覽效果
快速鍵
先 ⌘+⇧+P 再輸⼊入 key
⾃自定快速鍵
⌘+K 兩次再填⼊入設定
★ 官⽅方⽂文件: https://code.visualstudio.com/docs/customization/keybindings
擴充功能
先 ⌘+⇧+P 再輸⼊入 ext
安裝擴充功能
★ 官⽅方網站: https://draculatheme.com/visual-studio-code/
ext	
  install	
  theme-­‐darcula
Visual	
  Studio	
  Code	
  簡易上⼿手指南
裝備哪裡找?
★ 官⽅方網站: https://marketplace.visualstudio.com/VSCode
整合 PHP
- 語法⽀支援.提⽰示.檢查 -
Visual	
  Studio	
  Code	
  簡易上⼿手指南
• VS Code 預設使⽤用 PATH 裡的 PHP interpreter
• 若是不想⽤用 PATH 裡的,可以指定路徑
客製化 PHP 設定
{	
  
	
   ...
語法⾼高亮度
• VS Code 內建就有語法
⾼高亮度功能,可將 PHP
程式碼上⾊色,⽅方便編寫
程式時判讀
語法提⽰示
• 只要將編輯語法切換為
PHP 後,輸⼊入 PHP 內
建函式名稱時,會⾃自動
列出可能的函式提⽰示,
按下 Enter 鍵即會⾃自
動補完
• 可按快速鍵 Ctrl	
  +	
  
Space 就依照當下編輯
脈絡進⾏行提⽰示
語法檢查
• 只要有指定 PHP 直譯
器做為 Linter,當在編
輯程式碼時,就可以做
語法檢查
• 可設定當 onSave 或
onType 做語法檢查
程式碼⽚片段
• 內建即⽀支援 code block
(snippets),當程式碼提
出現 code block 標記時
按下 Tab 鍵,即會⾃自
動輸⼊入⼀一塊程式碼⽚片段
⼼心動了嗎?
- 跳槽指南 -
Visual	
  Studio	
  Code	
  簡易上⼿手指南
跳槽指南
• 敬牆頭草們!
- 從Vim 來的
- 從 emaces 來的
- 從 Sublime Text 來的
- 從 Atom 來的
- 從 PhpStorm 來的
...
Visual	
  Studio	
  Code	
  簡易上⼿手指南
指令速查表
• 官⽅方⽂文件完整 keybinding 對照表
- https://code.visualstudio.com/docs/customization/
ke...
Q & A
謝謝聆聽.歡迎互動
Próxima SlideShare
Cargando en…5
×

Visual Studio Code 快速上手指南

48.861 visualizaciones

Publicado el

於 2016/5/28 在 Laravel 台灣 高雄社群小聚所分享的 Lightning Talk 內容,討論如何使用 Visual Studio Code 做為開發 PHP 專案的工具。

Publicado en: Tecnología
  • 我也整理了一篇 VS Code 擴充功能的文章~ http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Visual Studio Code 快速上手指南

  1. 1. Visual Studio Code 快速上⼿手指南 2016/05/28 范聖佑  Shengyou  Fan Laravel  ⾼高雄社群⼩小聚
  2. 2. 范聖佑 @shengyou http://shengyoufan.com https://www.facebook.com/shengyoufan 得寬科技 研究員 Laravel 台灣 傳教士 Laravel 道場 作者
  3. 3. 該⽤用 Editor 還是 IDE? IDEEditor Editor 以上、IDE 未滿
  4. 4. Visual Studio Code • 由 Microsoft 主導開發的編輯器 • 以 Electron 技術打造 • 內建語法提⽰示、版本控制及偵 錯⼯工具 • 跨平台、免費、開放源始碼 • ⽀支援外掛系統,可擴充功能 ⺫⽬目前正式發佈 v1.1.1 穩定版
  5. 5. Visual  Studio  Code  簡易上⼿手指南 綜覽VS Code • 安裝VS Code • 基礎操作 • 版本控制 • 客製化選項 • PHP 開發整合
  6. 6. 安裝VS Code - 安裝.啟動.更新 -
  7. 7. Visual  Studio  Code  簡易上⼿手指南 系統需求 • 硬體 - 1.6 GHz CPU 以上 - 1GB 記憶體 (!) - 200 MB 硬碟空間 • 平台 - Windows 7 以上 + .NET Framework 4.5 - Mac OS XYosemite 以上 - Linux (Debian 及 Red Hat 系列) ★ 官⽅方⽂文件: https://code.visualstudio.com/docs/supporting/requirements
  8. 8. Visual  Studio  Code  簡易上⼿手指南 下載並安裝 • Windows - 下載 .exe 檔後下⼀一步到底 • Mac - 下載 .dmg 檔後把 .app 拖曳到應⽤用程式資料夾 • Linux - 下載安裝檔 ★ 官⽅方⽂文件: https://code.visualstudio.com/Docs/editor/setup sudo  dpkg  -­‐i  <file>.deb   sudo  yum  install  <file>.rpm   sudo  dnf  install  <file>.rpm
  9. 9. ⼯工作區 Viewbar Editor Sidebar Statusbar
  10. 10. Visual  Studio  Code  簡易上⼿手指南 安裝指令列⼯工具 • Windows - 安裝完⾃自動就會將 code 加⼊入環境變數 • Mac - 打開 Command Palette,輸⼊入安裝指令 • Linux - 安裝完⾃自動就會將 code 加⼊入環境變數
  11. 11. Command Palette ⌘+⇧+P
  12. 12. Visual  Studio  Code  簡易上⼿手指南 從指令列啟動 • 先開啟 Terminal 應⽤用程式 • 切換⼯工作⺫⽬目錄 • 使⽤用 code 全域指令開啟 $  cd  ~/Code $  code  .
  13. 13. Visual  Studio  Code  簡易上⼿手指南 切換語系 • VS Code 預設會⽤用系統語系做為介⾯面語系 • 內建已有繁體中⽂文語系 • 但…建議切換成英⽂文版 (!) • 先 ⌘ + ⇧ + P 再輸⼊入 language {     //  Defines  VSCode's  display  language.     //  Changing  the  value  requires  to  restart  VSCode.     "locale":"en"   }
  14. 14. ⾃自動更新 ⾃自動更新提⽰示
  15. 15. 基礎操作 - 編輯.視窗.設定 -
  16. 16. Visual  Studio  Code  簡易上⼿手指南 開啟/編輯檔案 • 從下拉式選單開啟對話框開檔 • 從 Sidebar 點選檔案列表,開啟在右邊 Editor 區塊 • ⌘ + P 輸⼊入檔名,依檔名模糊⽐比對後選擇 • ⌘ + W 關閉檔案 • ^ [+ shift] + Tab 切換最近開啟的檔案
  17. 17. Visual  Studio  Code  簡易上⼿手指南 視窗操作 • ⌘ + 切分將現有視窗 • 在 Sidebar 對檔名按 ⌘ + Click,於分割視窗開啟 • ⌘ + 1~3 切換⼯工作視窗
  18. 18. Visual  Studio  Code  簡易上⼿手指南 選取與跨欄編輯 • 快速選取 - ⌘ + D 選取相同字串 • 跨欄編輯 - ⌥ + Click 跳點選取 - ⇧ + ⌥ + Click 跨欄選取 - ⌘ + ⌥ + ↑ 往上做跨欄選取 - ⌘ + ⌥ + ↓ 往下做跨欄選取
  19. 19. 使⽤用者設定
  20. 20. Visual  Studio  Code  簡易上⼿手指南 ⾃自動存檔 • 讓檔案⾃自動存檔,不⽤用⼀一直按 ⌘ + S {          //  Controls  auto  save  of  dirty  files.  Accepted  values:     "off",  "afterDelay",  "onFocusChange".  If  set  to  "afterDelay"   you  can  configure  the  delay  in  "files.autoSaveDelay".          "files.autoSave":  "off",          //  Controls  the  delay  in  ms  after  which  a  dirty  file  is   saved  automatically.  Only  applies  when  "files.autoSave"  is   set  to  "afterDelay"          "files.autoSaveDelay":  1000   }
  21. 21. 版本控制 - 整合 -
  22. 22. Visual  Studio  Code  簡易上⼿手指南 • VS Code 預設使⽤用 PATH 裡的 git,因此要先裝 git • 若是不想⽤用 PATH 裡的,可以指定路徑 客製化 git 設定 {          //-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  Git  configuration  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐          //  Is  git  enabled          "git.enabled":  true,          //  Path  to  the  git  executable          "git.path":  null,          //  Whether  auto  fetching  is  enabled.          "git.autofetch":  true,   }
  23. 23. Visual  Studio  Code  簡易上⼿手指南 git 設定 • ⾸首次使⽤用前,該設定的 git 使⽤用者設定別忘了! $  git  config  -­‐-­‐global  user.name  "{請寫⾃自⼰己的名字}"   $  git  config  -­‐-­‐global  user.email  "{請改成⾃自⼰己的 email }"
  24. 24. 初始化 • 先⽤用VS Code 開啟專案 資料夾 • 切換到 git 側邊欄 • 點選初始化 $  git  init
  25. 25. 將檔案放⼊入 Stage 區 • 按加號 - 可將所有未追蹤的⼀一 次加⼊入 Stage 區 - 也可以針對單⼀一檔案 加⼊入 Stage 區 • 按減號 - 執⾏行反向動作 $  git  add  .
  26. 26. 將檔案放⼊入 Stage 區 • 按加號 - 可將所有未追蹤的⼀一 次加⼊入 Stage 區 - 也可以針對單⼀一檔案 加⼊入 Stage 區 • 按減號 - 執⾏行反向動作 $  git  add  .
  27. 27. 提交版本 • 確認加⼊入 Stage 區的檔 案內容 • 輸⼊入提交訊息 • 按下打勾按鈕確認提交
 (快速鍵 ⌘ + Enter) $  git  commit  -­‐m
  28. 28. 邊欄提⽰示 • 編輯檔案時會⾃自動在邊 欄提⽰示該⾏行的變更 - 綠⾊色光條:新增 - 藍⾊色光條:修改 - 紅⾊色箭頭:刪除 $  git  diff
  29. 29. 檔案⽐比對 $  git  diff  {file}
  30. 30. 檔案狀態 • 切換到 git 側邊欄時, 可顯⽰示專案資料夾內各 檔案的狀態 - 紅⾊色 D:刪除 - 綠⾊色 A:新增 - 灰⾊色 U:未追蹤 - 藍⾊色 M:修改 $  git  status
  31. 31. 還原檔案 • 當滑⿏鼠移上⾄至檔案時, 可以點選還原按鈕,就 可以將檔案回復成未修 改前的版本 $  git  checkout
  32. 32. 直接下 git 指令 可⽤用快速鍵 ⌘ + ⇧ + P 開啟 Command Palette 即可直接下 git 指令
  33. 33. 客製化 - 佈景主題.快速鍵.擴充 -
  34. 34. 佈景主題 先 ⌘+⇧+P 再輸⼊入 theme
  35. 35. 佈景主題 切換不同主題,即時預覽效果
  36. 36. 快速鍵 先 ⌘+⇧+P 再輸⼊入 key
  37. 37. ⾃自定快速鍵 ⌘+K 兩次再填⼊入設定 ★ 官⽅方⽂文件: https://code.visualstudio.com/docs/customization/keybindings
  38. 38. 擴充功能 先 ⌘+⇧+P 再輸⼊入 ext
  39. 39. 安裝擴充功能 ★ 官⽅方網站: https://draculatheme.com/visual-studio-code/ ext  install  theme-­‐darcula
  40. 40. Visual  Studio  Code  簡易上⼿手指南 裝備哪裡找? ★ 官⽅方網站: https://marketplace.visualstudio.com/VSCode
  41. 41. 整合 PHP - 語法⽀支援.提⽰示.檢查 -
  42. 42. Visual  Studio  Code  簡易上⼿手指南 • VS Code 預設使⽤用 PATH 裡的 PHP interpreter • 若是不想⽤用 PATH 裡的,可以指定路徑 客製化 PHP 設定 {     //-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  PHP  Configuration  options  -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐          //  Whether  php  validation  is  enabled  or  not.          "php.validate.enable":  true,          //  Points  to  the  php  executable.          "php.validate.executablePath":  null,          //  Whether  the  linter  is  run  on  save  or  on  type.          "php.validate.run":  "onSave",   }
  43. 43. 語法⾼高亮度 • VS Code 內建就有語法 ⾼高亮度功能,可將 PHP 程式碼上⾊色,⽅方便編寫 程式時判讀
  44. 44. 語法提⽰示 • 只要將編輯語法切換為 PHP 後,輸⼊入 PHP 內 建函式名稱時,會⾃自動 列出可能的函式提⽰示, 按下 Enter 鍵即會⾃自 動補完 • 可按快速鍵 Ctrl  +   Space 就依照當下編輯 脈絡進⾏行提⽰示
  45. 45. 語法檢查 • 只要有指定 PHP 直譯 器做為 Linter,當在編 輯程式碼時,就可以做 語法檢查 • 可設定當 onSave 或 onType 做語法檢查
  46. 46. 程式碼⽚片段 • 內建即⽀支援 code block (snippets),當程式碼提 出現 code block 標記時 按下 Tab 鍵,即會⾃自 動輸⼊入⼀一塊程式碼⽚片段
  47. 47. ⼼心動了嗎? - 跳槽指南 -
  48. 48. Visual  Studio  Code  簡易上⼿手指南 跳槽指南 • 敬牆頭草們! - 從Vim 來的 - 從 emaces 來的 - 從 Sublime Text 來的 - 從 Atom 來的 - 從 PhpStorm 來的 - 從 Netbeans 來的
  49. 49. Visual  Studio  Code  簡易上⼿手指南 指令速查表 • 官⽅方⽂文件完整 keybinding 對照表 - https://code.visualstudio.com/docs/customization/ keybindings
  50. 50. Q & A 謝謝聆聽.歡迎互動

×