1-2 安裝 VSCode 開發工具

一、安裝前準備

1. 官網：https://code.visualstudio.com/
2. 開發工具，請使用自己慣用的文字編輯器即可，上課用Visual Studio Code 為主
3. 建議先安裝以下兩個軟體：
   • node.js https://nodejs.org/en/ ，讓功能更完整（可安裝 18.17.0 LTS 版本）。
   • git https://git-scm.com/download/win，VSCode的版本控制才會有作用（可安裝 64-bit Git for Windows Setup）。
4. 做好編輯器設定

   {
       "editor.fontSize": 18,
       //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
       "editor.wordWrap": "on",
       // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
       "editor.formatOnPaste": true,
       // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
       "editor.mouseWheelZoom": true,
       // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
       "editor.formatOnSave": false,
       // 控制是否應在輸入時自動顯示建議
       "editor.quickSuggestions": {
           "other": true,
           "comments": false,
           "strings": true
       },
       "editor.minimap.enabled": false,
       "editor.tabCompletion": "on",
       "editor.linkedEditing": true,
       "editor.suggestSelection": "first",
       // 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
       "files.trimFinalNewlines": true,
       // 若啟用，將在儲存檔案時修剪尾端空白。
       "files.trimTrailingWhitespace": true,
       "files.associations": {
           "*.tpl": "html"
       },
       "[php]": {
           "editor.formatOnSave": true,
           "editor.defaultFormatter": "kokororin.vscode-phpfmt"
       },
       "emmet.triggerExpansionOnTab": true,
       "emmet.showSuggestionsAsSnippets": true,
       "git.ignoreMissingGitWarning": true,
       "git.enableSmartCommit": true,
       "git.autofetch": true,
       "git.confirmSync": false,
   }

二、安裝常用套件：

• Auto Close Tag : 讓標籤自動閉合的。
• Auto Rename Tag : 讓成對的標籤自動一起修改。
• AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
• Bootstrap 5 Quick Snippets : 快速插入Bootstrap 5 語法片段。
• ChatGPT - Bito AI Code Assistant：用AI來幫我們寫程式碼～
• Chinese (Traditional) Language Pack for Visual Studio Code：中文介面
• Copy file name：複製檔名
• Git History：檢視Git的完整紀錄
• HTML CSS Support：網頁的 id 及 class 自動補全，不用自己死記網頁中的 id 或 class

  "css.styleSheets": [    
      "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  ],
  "css.enabledLanguages": [
      "css",
      "scss",
      "tpl"
  ],

   

• indent-rainbow：以顏色標出縮排，更容易辨識與對齊
• Material Icon Theme：精美的檔案圖示（非必須）
• PHP Intelephense：夠快速完成PHP程式碼及查找關聯、精確錯誤報告，請加入設定：

  "intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": true,
  "intelephense.environment.includePaths": [
      "vendor"
  ],

  • 在套件搜尋框輸入「@builtin php」
  • 將「PHP Language Features」關閉，避免功能衝突
• phpfmt-PHP formatter：格式化PHP程式碼用，請加入設定（php.exe 的實際路徑請視實際情況修改）

  // php executable path
  "phpfmt.php_bin": "C:/UniServerZ/core/php82/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,

• Prettier - Code formatter：美化HTML、JavaScript、CSS...等格式器
• vscode-goto-documentation：快速檔案搜尋

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

• 最後的完整設定檔：

  {
      "editor.fontSize": 18,
      //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
      "editor.wordWrap": "on",
      // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
      "editor.formatOnPaste": true,
      // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
      "editor.mouseWheelZoom": true,
      // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
      "editor.formatOnSave": false,
      // 控制是否應在輸入時自動顯示建議
      "editor.quickSuggestions": {
          "other": true,
          "comments": false,
          "strings": true
      },
      "editor.minimap.enabled": false,
      "editor.tabCompletion": "on",
      "editor.linkedEditing": true,
      "editor.suggestSelection": "first",
      // 若啟用，則會在儲存檔案時，修剪檔案末新行尾的所有新行。
      "files.trimFinalNewlines": true,
      // 若啟用，將在儲存檔案時修剪尾端空白。
      "files.trimTrailingWhitespace": true,
      "files.associations": {
          "*.tpl": "html"
      },
      "[php]": {
          "editor.formatOnSave": true,
          "editor.defaultFormatter": "kokororin.vscode-phpfmt"
      },
      "emmet.triggerExpansionOnTab": true,
      "emmet.showSuggestionsAsSnippets": true,
      "git.ignoreMissingGitWarning": true,
      "git.enableSmartCommit": true,
      "git.autofetch": true,
      "git.confirmSync": false,
      "css.styleSheets": [
          "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      ],
      "css.enabledLanguages": [
          "css",
          "scss",
          "tpl"
      ],
      "[jsonc]": {
          "editor.defaultFormatter": "vscode.json-language-features"
      },
      // php executable path
      "phpfmt.php_bin": "C:/UniServerZ/core/php82/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,
      "intelephense.completion.fullyQualifyGlobalConstantsAndFunctions": true,
      "intelephense.environment.includePaths": [
          "vendor"
      ],
  }

   

三、常用快捷鍵

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. Shift+Alt+A：區域註解
10. Ctrl+`：開終端機
11. Ctrl+B：關閉左側工具
12. Ctrl+X：刪除目前行
13. Ctrl+G：跳至某行
14. Ctrl+end：跳至檔案結尾
15. Ctrl+Z：回上個動作（復原）
16. Ctrl+Y：回下個動作（再做）
17. shift+alt+F：美化（格式化）語法
18. shift+alt+滑鼠左鍵：區塊標記
19. 完整快捷鍵整理：https://poychang.github.io/vscode/
20. Emmet語法：https://abgne.tw/web/emmet-tutorial-series-basic.html