Visual Studio Code快速上⼿手指南

2016/05/28

范聖佑  Shengyou  Fan

Laravel  ⾼高雄社群⼩小聚

范聖佑@shengyou http://shengyoufan.com https://www.facebook.com/shengyoufan

得寬科技 研究員 Laravel 台灣 傳教士 Laravel 道場 作者

該⽤用 Editor 還是 IDE？

IDEEditorEditor 以上、IDE 未滿

Visual Studio Code• 由 Microsoft 主導開發的編輯器• 以 Electron 技術打造• 內建語法提⽰示、版本控制及偵錯⼯工具

• 跨平台、免費、開放源始碼• ⽀支援外掛系統，可擴充功能

⺫⽬目前正式發佈 v1.1.1 穩定版

Visual  Studio  Code  簡易上⼿手指南

綜覽 VS Code• 安裝 VS Code

• 基礎操作• 版本控制• 客製化選項• PHP 開發整合

安裝 VS Code - 安裝．啟動．更新 -

Visual  Studio  Code  簡易上⼿手指南

系統需求• 硬體

- 1.6 GHz CPU 以上- 1GB 記憶體 (!)

- 200 MB 硬碟空間• 平台

- Windows 7 以上 + .NET Framework 4.5

- Mac OS X Yosemite 以上- Linux (Debian 及 Red Hat 系列)

★ 官⽅方⽂文件： https://code.visualstudio.com/docs/supporting/requirements

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

⼯工作區

Viewbar Editor

Sidebar

Statusbar

Visual  Studio  Code  簡易上⼿手指南

安裝指令列⼯工具• Windows

- 安裝完⾃自動就會將 code 加⼊入環境變數• Mac

- 打開 Command Palette，輸⼊入安裝指令

• Linux

- 安裝完⾃自動就會將 code 加⼊入環境變數

Command Palette

⌘+⇧+P

Visual  Studio  Code  簡易上⼿手指南

從指令列啟動• 先開啟 Terminal 應⽤用程式• 切換⼯工作⺫⽬目錄

• 使⽤用 code 全域指令開啟$  cd  ~/Code

$  code  .

Visual  Studio  Code  簡易上⼿手指南

切換語系• VS Code 預設會⽤用系統語系做為介⾯面語系• 內建已有繁體中⽂文語系• 但…建議切換成英⽂文版 (!)

• 先 ⌘ + ⇧ + P 再輸⼊入 language{     //  Defines  VSCode's  display  language.     //  Changing  the  value  requires  to  restart  VSCode.     "locale":"en"  }

⾃自動更新

⾃自動更新提⽰示

基礎操作 - 編輯．視窗．設定 -

Visual  Studio  Code  簡易上⼿手指南

開啟/編輯檔案• 從下拉式選單開啟對話框開檔• 從 Sidebar 點選檔案列表，開啟在右邊 Editor 區塊• ⌘ + P 輸⼊入檔名，依檔名模糊⽐比對後選擇• ⌘ + W 關閉檔案• ^ [+ shift] + Tab 切換最近開啟的檔案

Visual  Studio  Code  簡易上⼿手指南

視窗操作• ⌘ + \ 切分將現有視窗• 在 Sidebar 對檔名按 ⌘ + Click，於分割視窗開啟• ⌘ + 1~3 切換⼯工作視窗

Visual  Studio  Code  簡易上⼿手指南

選取與跨欄編輯• 快速選取

- ⌘ + D 選取相同字串• 跨欄編輯

- ⌥ + Click 跳點選取- ⇧ + ⌥ + Click 跨欄選取- ⌘ + ⌥ + ↑ 往上做跨欄選取- ⌘ + ⌥ + ↓ 往下做跨欄選取

使⽤用者設定

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  }

版本控制 - 整合 -

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,  }

Visual  Studio  Code  簡易上⼿手指南

git 設定• ⾸首次使⽤用前，該設定的 git 使⽤用者設定別忘了！

$  git  config  -­‐-­‐global  user.name  "{請寫⾃自⼰己的名字}"  $  git  config  -­‐-­‐global  user.email  "{請改成⾃自⼰己的 email }"

初始化• 先⽤用 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 設定

{     //-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐  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",  }

語法⾼高亮度• 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 來的- 從 Netbeans 來的

Visual  Studio  Code  簡易上⼿手指南

指令速查表• 官⽅方⽂文件完整 keybinding 對照表

- https://code.visualstudio.com/docs/customization/keybindings

Q & A謝謝聆聽．歡迎互動