![[Modern Web 2016] 讓你的 PHP 開發流程再次潮起來](https://cdn.slidesharecdn.com/ss_thumbnails/modernize-your-php-workflow-160824071317-thumbnail.jpg?cb=1472139678)
Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 30 day trial from Scribd
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 謝謝聆聽．歡迎互動