XOOPS輕鬆架

Laravel 5.6 入門講義
================

### 一、安裝前準備

1. 官網：<https://code.visualstudio.com/>
2. 開發工具，請使用自己慣用的文字編輯器即可，上課用Visual Studio Code 為主
3. 建議先安裝以下兩個軟體： 
 - node.js <https://nodejs.org/en/> ，讓功能更完整（務必安裝 > 6.0 版本）。
 - git <https://git-scm.com/download/win>，VSCode的版本控制才會有作用。
4. 亦可安裝[Visual Studio Code Portable（可攜版）](https://github.com/garethflowers/vscode-portable/releases)
5. 做好編輯器設定（php.exe的實際路徑請視實際情況修改） 
 ```javascript
 {
 	"git.ignoreMissingGitWarning": true,
 	"update.channel": "none",
 	// 控制字型大小 (以像素為單位)。
 	"editor.fontSize": 18,
 	// 控制是否自動換行。
 	"editor.wordWrap": "on",
 	// 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定檔案中一個範圍的格式。
 	"editor.formatOnPaste": true,
 	// 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
 	"editor.mouseWheelZoom": true,
 	// 指向 PHP 可執行檔。
 	"php.validate.executablePath": "C:/Users/使用者名稱/xampp/php/php.exe",
 
 	"css.remoteStyleSheets": [
 		"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 	],
 		"css.fileExtensions": [
 	"css",
 	"scss",
 	"tpl"
 	],
 }
 ```
 
### 二、安裝套件：

- `phpfmt`：格式化PHP程式碼用，請加入設定（php.exe的實際路徑請視實際情況修改 
 ```javascript
 // php executable path
 "phpfmt.php_bin": "C:/Users/使用者名稱/xampp/php/php.exe",
 // enable auto align of ST_EQUAL and T_DOUBLE_ARROW
 "phpfmt.enable_auto_align": true,
 // fixes visibiliy order for method in classes - PSR-2 4.2
 "phpfmt.visibility_order": true,
 // convert multistatement blocks into multiline blocks
 "phpfmt.smart_linebreak_after_curly": true,
 // Enable per-language
 "[php]": {
 	"editor.formatOnSave": true
 },
 ```
- `vscode-goto-documentation`：快速檔案搜尋
- `AutoFileName` : 讓編輯器自動完成圖片或檔案路徑。
- `Auto Rename Tag` : 讓成對的標籤自動一起修改。
- `Auto Close Tag` : 讓標籤自動閉合的。
- `Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets` : 插入Bootstrap 4 或 Font awesome 語法片段。
- `DotENV`：讓.env檔也可以套用高亮度設定
- `Beautify`：美化CSS 
 ```javascript
 "beautify.language": {
 "js": {
 "type": [
 "javascript",
 "json"
 ],
 "filename": [
 ".jshintrc",
 ".jsbeautifyrc"
 ]
 // "ext": ["js", "json"]
 // ^^ to set extensions to be beautified using the javascript beautifier
 },
 "css": [
 "css",
 "scss"
 ],
 "html": [
 "htm",
 "html",
 "blade.php"
 ]
 // ^^ providing just an array sets the VS Code file type
 },
 ```
- `Git History`：可觀看所有的Git提交紀錄
- `indent-rainbow`：以顏色標出縮排
- `Laravel Blade Snippets`：Laravel 樣板的快速語法 
 ```javascript
 // enable tab to expanse emmet tags
 "emmet.triggerExpansionOnTab": true, 
 // if you would like to enable blade format
 "blade.format.enable": true, 
 ```
- `Laravel 5 Snippets`：Laravel 快速語法（作者為 Winnie Lin 的那個）
- `Laravel goto view`：可直接快速開啟視圖檔案
- `laravel-goto-controller`：可直接快速開啟控制器檔案
- `Material Icon Theme`：精美的檔案圖示
- `PHP IntelliSense`：自動提示已定義的class![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) 
 ```javascript
 // 設定是否啟用內建 PHP 語言建議。此支援會建議 PHP 全域和變數。
 "php.suggest.basic": false,
 ```
 
 <span style="background: rgba(220, 220, 220, 0.5) url("https://campus-xoops.tn.edu.tw/modules/tadtools/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; top: -15px; left: 0px; display: block;">
 
1. 這裡有全部安裝好的[VSCodePortable1.24.0自解壓縮檔](https://campus-xoops.tn.edu.tw/modules/tad_uploader/index.php?op=dlfile&cfsn=1775&cat_sn=18&name=vscodeportable1.24.0.exe)
2. 不過癮的話，這裡還有更多他人推薦的套件：<http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html>
 
### 三、常用快捷鍵

1. <kbd>Ctrl</kbd>+<kbd>N</kbd>：建立新檔
2. <kbd>Ctrl</kbd>+<kbd>C</kbd>：複製
3. <kbd>Ctrl</kbd>+<kbd>V</kbd>：貼上
4. <kbd>Ctrl</kbd>+<kbd>S</kbd>：儲存
5. <kbd>Ctrl</kbd>+<kbd>F</kbd>：搜尋
6. <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd>：跨檔搜尋
7. <kbd>Ctrl</kbd>+<kbd>H</kbd>：取代
8. <kbd>Ctrl</kbd>+<kbd>/</kbd>：註解
9. <kbd>Ctrl</kbd>+<kbd>`</kbd>：開終端機
10. <kbd>Ctrl</kbd>+<kbd>B</kbd>：關閉左側工具
11. <kbd>Ctrl</kbd>+<kbd>X</kbd>：刪除目前行
12. <kbd>Ctrl</kbd>+<kbd>G</kbd>：跳至某行
13. <kbd>Ctrl</kbd>+<kbd>end</kbd>：跳至檔案結尾
14. <kbd>Ctrl</kbd>+<kbd>Z</kbd>：回上個動作（復原）
15. <kbd>Ctrl</kbd>+<kbd>Y</kbd>：回下個動作（再做）
16. <kbd>shift</kbd>+<kbd>alt</kbd>+<kbd>F</kbd>：美化（格式化）語法
17. <kbd>shift</kbd>+<kbd>alt</kbd>+<kbd>滑鼠左鍵</kbd>：區塊標記
18. 完整快捷鍵整理：<https://poychang.github.io/vscode/>
19. Emmet語法：<https://abgne.tw/web/emmet-tutorial-series-basic.html>

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域