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 快速上⼿手指南 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 謝謝聆聽．歡迎互動
Upcoming SlideShare
Loading in …5
×

Visual Studio Code 快速上手指南

45,173 views

Published on

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

Published in: Technology
no profile picture user
  • 我也整理了一篇 VS Code 擴充功能的文章～ http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More

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 謝謝聆聽．歡迎互動

×