1-2-2 Visual Studio Code文字編輯器

一、安裝前準備

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（可攜版）
5. 做好編輯器設定（php.exe的實際路徑請視實際情況修改）

   {
   	"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的實際路徑請視實際情況修改

  // 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

  "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 樣板的快速語法

  // 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

  // 設定是否啟用內建 PHP 語言建議。此支援會建議 PHP 全域和變數。
  "php.suggest.basic": false,

1. 這裡有全部安裝好的VSCodePortable1.24.0自解壓縮檔

2. 不過癮的話，這裡還有更多他人推薦的套件：http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html

三、常用快捷鍵

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