Visual Studio Code 快速上手指南
•
91 likes•56,723 views
於 2016/5/28 在 Laravel 台灣 高雄社群小聚所分享的 Lightning Talk 內容，討論如何使用 Visual Studio Code 做為開發 PHP 專案的工具。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Visual Studio Code 快速上手指南
Similar to Visual Studio Code 快速上手指南 (20)
More from Shengyou Fan
More from Shengyou Fan (20)
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
- 10. Visual Studio Code 簡易上⼿手指南 安裝指令列⼯工具 • Windows - 安裝完⾃自動就會將 code 加⼊入環境變數 • Mac - 打開 Command Palette，輸⼊入安裝指令 • Linux - 安裝完⾃自動就會將 code 加⼊入環境變數
- 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. ⾃自動更新 ⾃自動更新提⽰示
- 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
- 32. 直接下 git 指令 可⽤用快速鍵 ⌘ + ⇧ + P 開啟 Command Palette 即可直接下 git 指令
- 34. 佈景主題 先 ⌘+⇧+P 再輸⼊入 theme
- 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 謝謝聆聽．歡迎互動