Successfully reported this slideshow.

Visual Studio Code 快速上手指南

91

Share

1 of 50
1 of 50

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

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

×