凌波微步：wagon + VS Code 的輕功哲學
8 likes3,767 views
本文件介绍了如何使用Wagon结合VS Code进行Laravel开发，提供了安装步骤、环境设置和使用技巧。Wagon是一个轻量级的开发环境，集成了多个开源工具，旨在简化设置过程。文档还提到了一些常见问题的解决方案，以及如何提高代码编辑效率的方法。
![凌波微步：wagon
+
VS
Code
的輕功哲學
EditorConfig forVS Code
;
.editorconfig
root
=
true
[*]
charset
=
utf-‐8
indent_size
=
4
indent_style
=
space
end_of_line
=
lf
insert_final_newline
=
true
trim_trailing_whitespace
=
true
[package.json]
indent_size
=
2
trim_trailing_whitespace
=
true
[*.md]
trim_trailing_whitespace
=
false](https://image.slidesharecdn.com/wagon-plus-vs-code-160802114705/85/wagon-VS-Code-56-320.jpg)
凌波微步：wagon + VS Code 的輕功哲學
- 1. 凌波微步 wagon +VS Code 的輕功哲學 2016/07/30 范聖佑 Shengyou Fan Laravel 台灣 台中社群⼩小聚 #2
- 2. 范聖佑 @shengyou http://shengyoufan.com https://www.facebook.com/shengyoufan 得寬科技 研究員 Laravel 台灣 傳教士 Laravel 道場 作者
- 3. 凌波微步：wagon + VS Code 的輕功哲學 Laravel 道場 ★ 道場網址： http://www.laravel-dojo.com/
- 4. • Laravel 道場 拿來做教育訓練的模擬機 • 整合 Cmder、UwAmp、git、Composer 等多項開放源始碼⼯工具於⼀一體 • 獨⽴立的環境變數、port 設定 • 免安裝、免設定、解壓縮即可使⽤用！ • 在會重開機⾃自動還原的環境下特別好⽤用！ ⺫⽬目前正式發佈 v1.3.0 穩定版 http://www.laravel-dojo.com/opensource/wagon wagon
- 6. 凌波微步：wagon + VS Code 的輕功哲學 安裝步驟 • 請先下載/安裝Visual C++ 可轉散發套件 - 請下載 2012 及 2015 兩個版本的 x86 (32bits) 及 x64 (64bits) 兩版版本共計四個檔案並安裝 • 再到 Laravel 道場下載 wagon-release-{version}.zip - 把 zip 檔解壓縮，並放到你喜歡的位置 ★ PHP 5.6 需要Visual C++ 可轉散發套件 2012 ★ PHP 7.0 需要Visual C++ 可轉散發套件 2015 ★ 只要檔案路徑不要沒有⾮非英⽂文字元即可
- 7. 凌波微步：wagon + VS Code 的輕功哲學 使⽤用⽅方式 • 雙擊 wagon/cmder/Cmder.exe 輸⼊入指令 - 已移植 Unix 常⾒見指令 (ls, rm, vim, curl…等) - 可以使⽤用 php-cli、Composer、git 等 • 雙擊 wagon/uwamp/UwAmp.exe 啟動 AMP 伺服器 - HTTP 為 8000 port - 預設⾸首⾴頁在 wagon/uwamp/www/default - MySQL 為 33060 port，帳密為 root/root - adminer 可直接在 http://localhost:8000/mysql 使⽤用 ★ Cmder 及 UwAmp 建個捷徑在桌⾯面上會更⽅方便喔！
- 8. 凌波微步：wagon + VS Code 的輕功哲學 ⽤用 wagon 開發 Laravel https://youtu.be/KoWBaGDm55c
- 9. 凌波微步：wagon + VS Code 的輕功哲學 ⾃自動進⼊入 www 資料夾 • 不管 wagon 放在哪裡，只要打開 Cmder，就會⾃自動 進⼊入到 wagon/uwamp/www 資料夾，⽅方便管理專案 預設進⼊入 wagon/uwamp/www 資料夾
- 10. 凌波微步：wagon + VS Code 的輕功哲學 獨⽴立環境變數 Cmder 啟動時⾃自⾏行載⼊入 獨⽴立的環境變數 原作業系統不受 wagon 的 PATH 影響
- 11. 凌波微步：wagon + VS Code 的輕功哲學 指令⾃自動補完 https://youtu.be/BYdDiuLdPzQ
- 12. 凌波微步：wagon + VS Code 的輕功哲學 預先安裝的 Global Packages https://youtu.be/DVcN0MlerrU
- 13. 凌波微步：wagon + VS Code 的輕功哲學 不⼩小⼼心玩壞了？ • 若有以下症頭： - 把設定檔改掉後改不回來… - wagon 檔案 Copy 來 Copy 去東⻄西掉了… - 莫名的錯誤訊息、MySQL 再也開不起來… • 請依以下指⽰示服⽤用： - 把 wagon/uwamp/www 裡⾯面的專案備份起來 - 重新下載 wagon，解壓縮後重新覆蓋 - 把備份的專案再放回 wagon/uwamp/www 即可
- 14. 凌波微步：wagon + VS Code 的輕功哲學 多重安裝/解除安裝？ • 多重安裝 - 只要把 zip 檔解開就是⼀一份安裝 - 想放到哪裡就放到哪裡 - 想安裝幾份隨你⾼高興！ • 解除解裝 - 既然都免安裝了，解除安裝就是直接丟垃圾筒！
- 17. 凌波微步：wagon + VS Code 的輕功哲學 貼⼼心提醒 • 只⽀支援 Windows 64bits 作業系統 • 下載時請到 Laravel 道場下載，或是到 wagon 的 Github 下載 release 版 • 就是個訓練模擬機，不要⽤用在⾮非開發的⽤用途外 • 有發現任何 bugs 歡迎開 issue 或回報給作者！ (已測試 Windows 7, 8, 10 皆可，XP？謝謝再聯絡) (拜託不要直接 clone 或 download master 的檔案) (拜託請千萬不要裝在正式機上！) (假如願意協助開發/維護也很歡迎喔 ^.< )
- 18. • 由 Microsoft 主導開發的編輯器 • 以 Electron 技術打造 • 內建語法提⽰示、版本控制及偵錯⼯工具 • 跨平台、免費、開放源始碼 • ⽀支援外掛系統，可擴充功能 ⺫⽬目前正式發佈 v1.3.1 穩定版 https://code.visualstudio.com/ Visual Studio Code
- 19. 凌波微步：wagon + VS Code 的輕功哲學 • ⾄至Visual Studio Code 官⽅方網站下載安裝檔 • 雙擊 .exe 後⼀一直按下⼀一步即可 安裝步驟 記得安裝右鍵選單功能
- 20. 凌波微步：wagon + VS Code 的輕功哲學 啟動⽅方式 • 從檔案總管選單 - 將檔案總管切換⾄至⼯工作⺫⽬目錄 - 單擊右鍵，選擇「使⽤用 Code」開啟 • 從指令列啟動 - 使⽤用 cd 指令切換⾄至⼯工作⺫⽬目錄 - 使⽤用 code . 指令開啟⼯工作⺫⽬目錄
- 21. 凌波微步：wagon + VS Code 的輕功哲學 ⾃自動更新 • VS Code 會提⽰示⾃自動更新，更新後總有新功能 + 修 好很多 bugs，記得更新就對了！ ⾃自動更新提⽰示
- 22. 凌波微步：wagon + VS Code 的輕功哲學 檔案管理與搜尋 檔案⾯面板 搜尋/取代⾯面板 ⾯面板開合 Ctrl + B
- 23. 凌波微步：wagon + VS Code 的輕功哲學 語法⾼高亮度 內建語法⾼高亮度功能，⽀支援 PHP 程式碼
- 24. 凌波微步：wagon + VS Code 的輕功哲學 程式碼⽚片段 ⽀支援 code block (snippets)，快速輸⼊入程式碼
- 25. 凌波微步：wagon + VS Code 的輕功哲學 語法提⽰示 輸⼊入 PHP 內建函式名稱時，⾃自動列出語法提⽰示
- 26. 凌波微步：wagon + VS Code 的輕功哲學 必背快速鍵 • 命令選擇區 • 開啟檔案 • 選擇相同字串 • 跨欄編輯 ★ 先背這四個就可明顯提升⼯工作效率！
- 27. 凌波微步：wagon + VS Code 的輕功哲學 命令選擇區 直接輸⼊入指令關鍵字 Ctrl + Shift + P
- 28. 凌波微步：wagon + VS Code 的輕功哲學 開啟檔案 直接輸⼊入檔名關鍵字 Ctrl + P
- 29. 凌波微步：wagon + VS Code 的輕功哲學 選取相同字串 https://youtu.be/b4hF1VaRYko Ctrl + D
- 30. 凌波微步：wagon + VS Code 的輕功哲學 跨欄編輯 ★ Windows 平台顯⽰示卡驅動程式快速鍵有可能會衝突 Alt + Click 跳點選取 Ctrl + Alt + ↑ 往上做跨欄選取 Ctrl + Alt + ↓ 往下做跨欄選取 https://youtu.be/xrLSlckD5js
- 31. 凌波微步：wagon + VS Code 的輕功哲學 客製化VS Code • 系統預設設定 - VS Code 出廠時的預設設定 • 使⽤用者設定 - 使⽤用者跨⼯工作區的客製化設定 • ⼯工作區設定 - 針對特定⼯工作區的客製化設定 - 會產⽣生⼀一個 .vscode 的資料夾在專案根⺫⽬目錄
- 32. 凌波微步：wagon + VS Code 的輕功哲學 編輯設定檔 預設設定值 客製化設定
- 33. 凌波微步：wagon + VS Code 的輕功哲學 ⾃自動存檔 • 讓檔案⾃自動存檔，不⽤用⼀一直按 Ctrl + 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 } 改成 onFocusChange
- 34. 凌波微步：wagon + VS Code 的輕功哲學 編輯區縮放 • 讓滑⿏鼠滾輪調整編輯區的字型⼤大⼩小 { // Zoom the font of the editor when using mouse wheel and holding Ctrl "editor.mouseWheelZoom": false, } 改成 true ★ 整個VS Code 視窗內容放⼤大縮⼩小可⽤用 Ctrl + + 及 Ctrl + -
- 35. 凌波微步：wagon + VS Code 的輕功哲學 程式碼縮排導引線 • 讓滑⿏鼠滾輪調整編輯區的字型⼤大⼩小 { // Controls whether the editor should render indent guides "editor.renderIndentGuides": false, } 改成 true
- 36. 凌波微步：wagon + VS Code 的輕功哲學 快速鍵設定
- 37. 凌波微步：wagon + VS Code 的輕功哲學 快速鍵對照表 • 官⽅方快速鍵完整對照⽂文件 - https://code.visualstudio.com/docs/customization/keybindings
- 39. 凌波微步：wagon + VS Code 的輕功哲學 整合 wagon 及 Extensions • 整合 wagon 的 git • 整合 wagon 的 PHP • 整合 wagon 的 Git Bash • 安裝 PHP/Laravel 相關的 Extensions
- 40. + VS Code git
- 41. 凌波微步：wagon + VS Code 的輕功哲學 VS Code 需要 git.exe
- 42. 凌波微步：wagon + VS Code 的輕功哲學 • VS Code 預設使⽤用 PATH 裡的 git • 可以直接將路徑指向 wagon 裡的 git.exe 設定 git 路徑 { // Git // Is git enabled "git.enabled": true, // Path to the git executable "git.path": null, // Whether auto fetching is enabled. "git.autofetch": true } 改成 wagongitbingit.exe
- 43. 凌波微步：wagon + VS Code 的輕功哲學 設定環境變數 PATH
- 44. 凌波微步：wagon + VS Code 的輕功哲學 git 版本控制 https://youtu.be/x6HMXK90tDI
- 45. + VS Code PHP
- 46. 凌波微步：wagon + VS Code 的輕功哲學 VS Code 需要 php.exe
- 47. 凌波微步：wagon + VS Code 的輕功哲學 • VS Code 預設使⽤用 PATH 裡的 PHP interpreter • 可以直接將路徑指向 wagon 裡的 php.exe 客製化 PHP 設定 { // PHP // 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" } 改成 wagonuwampbinphp…php.exe 改成 onType
- 48. 凌波微步：wagon + VS Code 的輕功哲學 語法檢查 有紅⾊色波浪就是沒好事！
- 49. 凌波微步：wagon + VS Code 的輕功哲學 Problem ⾯面板 跨檔案⾯面板⼀一⺫⽬目了然
- 50. + VS Code git bash
- 51. 凌波微步：wagon + VS Code 的輕功哲學 • VS Code 預設使⽤用 $SHELL 或 %COMSPEC% 指定的 Console，但也可以指定成 Git Bash 客製化 Cmd 設定 { // Integrated Terminal // The path of the shell that the terminal uses on Windows. "terminal.integrated.shell.windows": "C:Windowssystem32 cmd.exe" } 改成 wagongitbinbash.exe
- 52. 凌波微步：wagon + VS Code 的輕功哲學 Terminal ⾯面板
- 54. 凌波微步：wagon + VS Code 的輕功哲學 外掛哪裡找？ ★ 官⽅方網站： https://marketplace.visualstudio.com/VSCode
- 55. 凌波微步：wagon + VS Code 的輕功哲學 外掛程式 • 以開發 PHP/Laravel 為⺫⽬目標，可安裝以下外掛： - EditorConfig forVS Code - Composer - Crane、PHP Symbols - PHP Formatter - PHP Debug - Laravel Blade Snippets、Laravel 5 Snippets
- 56. 凌波微步：wagon + VS Code 的輕功哲學 EditorConfig forVS Code ; .editorconfig root = true [*] charset = utf-‐8 indent_size = 4 indent_style = space end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true [package.json] indent_size = 2 trim_trailing_whitespace = true [*.md] trim_trailing_whitespace = false
- 57. 凌波微步：wagon + VS Code 的輕功哲學 Composer • PATH 裡⼀一定要有 PHP interpreter • Composer 路徑要另外設定 { // Composer Dependency Manager for PHP Configuration // Is composer enabled. "composer.enabled": true, // Path to the composer executable. "composer.executablePath": null } 改成 wagoncomposercomposer.bat
- 58. 凌波微步：wagon + VS Code 的輕功哲學 執⾏行 Composer 指令
- 59. 凌波微步：wagon + VS Code 的輕功哲學 Crane
- 60. 凌波微步：wagon + VS Code 的輕功哲學 PHP Symbols
- 61. 凌波微步：wagon + VS Code 的輕功哲學 PHP Formatter • 先裝 PHP-CS-Fixer • 設定 PHP Formatter $ composer global require friendsofphp/php-‐cs-‐fixer { // PHP Formatter Settings // Whether the php-‐cs-‐fixer library has been installed using Composer. If true, the extension will override pharPath and assume you have added Composer to your PATH. "phpformatter.composer": false, // Whether files should be fixed on save. "phpformatter.onSave": false } 改成 true 改成 true
- 62. 凌波微步：wagon + VS Code 的輕功哲學 PHP Debug • 設定 UwAmp 的 XDebug Remote Auto Start
- 63. 凌波微步：wagon + VS Code 的輕功哲學 PHP Debug • 設定 UwAmp 的 XDebug Remote Enable
- 64. 凌波微步：wagon + VS Code 的輕功哲學 PHP Debug • 先確認 XDebug 外掛已載⼊入 • 設定VS Code 的 launch.json
- 65. 凌波微步：wagon + VS Code 的輕功哲學 互動式偵錯 https://youtu.be/0ZYn7YL-‐m6Q
- 66. 凌波微步：wagon + VS Code 的輕功哲學 Laravel Blade Snippets
- 67. 凌波微步：wagon + VS Code 的輕功哲學 Laravel 5 Snippets
- 68. Q & A 謝謝聆聽．歡迎互動