visual studio code 快速上手指南
TRANSCRIPT
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謝謝聆聽.歡迎互動