Upcoming SlideShare
![[Community Open Camp] 給 PHP 開發者的 VS...](http://cdn.slidesharecdn.com/ss_thumbnails/vscodeforphper-160826142104-thumbnail.jpg?cb=1472221370)
Visual Studio Code 快速上手指南
- 1. Visual Studio Code 快速上⼿手指南 2016/05/28 范聖佑 Shengyou Fan Laravel ⾼高雄社群⼩小聚
- 2. 范聖佑 @shengyou http://shengyoufan.com https://www.facebook.com/shengyoufan 得寬科技 研究員 Laravel 台灣 傳教士 Laravel 道場 作者
- 3. 該⽤用 Editor 還是 IDE？ IDEEditor Editor 以上、IDE 未滿
- 4. Visual Studio Code • 由 Microsoft 主導開發的編輯器 • 以 Electron 技術打造 • 內建語法提⽰示、版本控制及偵 錯⼯工具 • 跨平台、免費、開放源始碼 • ⽀支援外掛系統，可擴充功能 ⺫⽬目前正式發佈 v1.1.1 穩定版
- 5. Visual Studio Code 簡易上⼿手指南 綜覽VS Code • 安裝VS Code • 基礎操作 • 版本控制 • 客製化選項 • PHP 開發整合
- 6. 安裝VS Code - 安裝．啟動．更新 -
- 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. 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. ⼯工作區 Viewbar Editor Sidebar Statusbar
- 10. Visual Studio Code 簡易上⼿手指南 安裝指令列⼯工具 • Windows - 安裝完⾃自動就會將 code 加⼊入環境變數 • Mac - 打開 Command Palette，輸⼊入安裝指令 • Linux - 安裝完⾃自動就會將 code 加⼊入環境變數
- 11. Command Palette ⌘+⇧+P
- 12. Visual Studio Code 簡易上⼿手指南 從指令列啟動 • 先開啟 Terminal 應⽤用程式 • 切換⼯工作⺫⽬目錄 • 使⽤用 code 全域指令開啟 $ cd ~/Code $ code .
- 13. Visual Studio Code 簡易上⼿手指南 切換語系 • VS Code 預設會⽤用系統語系做為介⾯面語系 • 內建已有繁體中⽂文語系 • 但…建議切換成英⽂文版 (!) • 先 ⌘ + ⇧ + P 再輸⼊入 language { // Defines VSCode's display language. // Changing the value requires to restart VSCode. "locale":"en" }
- 14. ⾃自動更新 ⾃自動更新提⽰示
- 15. 基礎操作 - 編輯．視窗．設定 -
- 16. Visual Studio Code 簡易上⼿手指南 開啟/編輯檔案 • 從下拉式選單開啟對話框開檔 • 從 Sidebar 點選檔案列表，開啟在右邊 Editor 區塊 • ⌘ + P 輸⼊入檔名，依檔名模糊⽐比對後選擇 • ⌘ + W 關閉檔案 • ^ [+ shift] + Tab 切換最近開啟的檔案
- 17. Visual Studio Code 簡易上⼿手指南 視窗操作 • ⌘ + 切分將現有視窗 • 在 Sidebar 對檔名按 ⌘ + Click，於分割視窗開啟 • ⌘ + 1~3 切換⼯工作視窗
- 18. Visual Studio Code 簡易上⼿手指南 選取與跨欄編輯 • 快速選取 - ⌘ + D 選取相同字串 • 跨欄編輯 - ⌥ + Click 跳點選取 - ⇧ + ⌥ + Click 跨欄選取 - ⌘ + ⌥ + ↑ 往上做跨欄選取 - ⌘ + ⌥ + ↓ 往下做跨欄選取
- 19. 使⽤用者設定
- 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. 版本控制 - 整合 -
- 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. Visual Studio Code 簡易上⼿手指南 git 設定 • ⾸首次使⽤用前，該設定的 git 使⽤用者設定別忘了！ $ git config -‐-‐global user.name "{請寫⾃自⼰己的名字}" $ git config -‐-‐global user.email "{請改成⾃自⼰己的 email }"
- 24. 初始化 • 先⽤用VS Code 開啟專案 資料夾 • 切換到 git 側邊欄 • 點選初始化 $ git init
- 25. 將檔案放⼊入 Stage 區 • 按加號 - 可將所有未追蹤的⼀一 次加⼊入 Stage 區 - 也可以針對單⼀一檔案 加⼊入 Stage 區 • 按減號 - 執⾏行反向動作 $ git add .
- 26. 將檔案放⼊入 Stage 區 • 按加號 - 可將所有未追蹤的⼀一 次加⼊入 Stage 區 - 也可以針對單⼀一檔案 加⼊入 Stage 區 • 按減號 - 執⾏行反向動作 $ git add .
- 27. 提交版本 • 確認加⼊入 Stage 區的檔 案內容 • 輸⼊入提交訊息 • 按下打勾按鈕確認提交 (快速鍵 ⌘ + Enter) $ git commit -‐m
- 28. 邊欄提⽰示 • 編輯檔案時會⾃自動在邊 欄提⽰示該⾏行的變更 - 綠⾊色光條：新增 - 藍⾊色光條：修改 - 紅⾊色箭頭：刪除 $ git diff
- 29. 檔案⽐比對 $ git diff {file}
- 30. 檔案狀態 • 切換到 git 側邊欄時， 可顯⽰示專案資料夾內各 檔案的狀態 - 紅⾊色 D：刪除 - 綠⾊色 A：新增 - 灰⾊色 U：未追蹤 - 藍⾊色 M：修改 $ git status
- 31. 還原檔案 • 當滑⿏鼠移上⾄至檔案時， 可以點選還原按鈕，就 可以將檔案回復成未修 改前的版本 $ git checkout
- 32. 直接下 git 指令 可⽤用快速鍵 ⌘ + ⇧ + P 開啟 Command Palette 即可直接下 git 指令
- 33. 客製化 - 佈景主題．快速鍵．擴充 -
- 34. 佈景主題 先 ⌘+⇧+P 再輸⼊入 theme
- 35. 佈景主題 切換不同主題，即時預覽效果
- 36. 快速鍵 先 ⌘+⇧+P 再輸⼊入 key
- 37. ⾃自定快速鍵 ⌘+K 兩次再填⼊入設定 ★ 官⽅方⽂文件： https://code.visualstudio.com/docs/customization/keybindings
- 38. 擴充功能 先 ⌘+⇧+P 再輸⼊入 ext
- 39. 安裝擴充功能 ★ 官⽅方網站： https://draculatheme.com/visual-studio-code/ ext install theme-‐darcula
- 40. Visual Studio Code 簡易上⼿手指南 裝備哪裡找？ ★ 官⽅方網站： https://marketplace.visualstudio.com/VSCode
- 41. 整合 PHP - 語法⽀支援．提⽰示．檢查 -
- 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. 語法⾼高亮度 • VS Code 內建就有語法 ⾼高亮度功能，可將 PHP 程式碼上⾊色，⽅方便編寫 程式時判讀
- 44. 語法提⽰示 • 只要將編輯語法切換為 PHP 後，輸⼊入 PHP 內 建函式名稱時，會⾃自動 列出可能的函式提⽰示， 按下 Enter 鍵即會⾃自 動補完 • 可按快速鍵 Ctrl + Space 就依照當下編輯 脈絡進⾏行提⽰示
- 45. 語法檢查 • 只要有指定 PHP 直譯 器做為 Linter，當在編 輯程式碼時，就可以做 語法檢查 • 可設定當 onSave 或 onType 做語法檢查
- 46. 程式碼⽚片段 • 內建即⽀支援 code block (snippets)，當程式碼提 出現 code block 標記時 按下 Tab 鍵，即會⾃自 動輸⼊入⼀一塊程式碼⽚片段
- 47. ⼼心動了嗎？ - 跳槽指南 -
- 48. Visual Studio Code 簡易上⼿手指南 跳槽指南 • 敬牆頭草們！ - 從Vim 來的 - 從 emaces 來的 - 從 Sublime Text 來的 - 從 Atom 來的 - 從 PhpStorm 來的 - 從 Netbeans 來的
- 49. Visual Studio Code 簡易上⼿手指南 指令速查表 • 官⽅方⽂文件完整 keybinding 對照表 - https://code.visualstudio.com/docs/customization/ keybindings
- 50. Q & A 謝謝聆聽．歡迎互動
Login to see the comments