:::

1-2 安裝 VSCode 開發工具

一、安裝前準備

  1. 官網:https://code.visualstudio.com/
  2. 開發工具,請使用自己慣用的文字編輯器即可,上課用Visual Studio Code 為主
  3. 建議先安裝以下兩個軟體:
  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

:::

書籍目錄

展開 | 闔起

快速登入


http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1761

計數器

今天: 304304304
昨天: 3254325432543254
總計: 8071076807107680710768071076807107680710768071076