:::

1-2 安裝 VSCode 開發工具

一、安裝前準備

  1. 官網:https://code.visualstudio.com/
  2. 開發工具,請使用自己慣用的文字編輯器即可,上課用Visual Studio Code 為主
  3. 建議先安裝以下兩個軟體:
  4. 做好編輯器設定(php.exe的實際路徑請視實際情況修改)
    {
    	"git.ignoreMissingGitWarning": true,
    	// 控制字型大小 (以像素為單位)。
    	"editor.fontSize": 18,
    	//  控制是否自動換行。
    	"editor.wordWrap": "on",
    	// 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用,而且格式器應該能夠設定檔案中一個範圍的格式。
    	"editor.formatOnPaste": true,
    	// 使用滑鼠滾輪並按住 Ctrl 時,縮放編輯器的字型
    	"editor.mouseWheelZoom": true,
    	// 指向 PHP 可執行檔。
    	"php.validate.executablePath": "D:/xampp8/php/php.exe",
    	// 讓 tab 也可以自動完成
    	"editor.tabCompletion": "on",
    
    }

二、安裝套件:

  • Chinese (Traditional) Language Pack for Visual Studio Code:中文介面
  • phpfmt:格式化PHP程式碼用,請加入設定(php.exe的實際路徑請視實際情況修改
    // php executable path
    "phpfmt.php_bin": "D:/xampp8/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 5 & Font Awesome Snippets : 插入Bootstrap 5 或 Font awesome 語法片段。
  • Prettier - Code formatter:美化HTML、JavaScript、CSS...等格式器
  • indent-rainbow:以顏色標出縮排
  • Material Icon Theme:精美的檔案圖示
  • PHP IntelliSense:自動提示已定義的class
  • 不過癮的話,這裡還有更多他人推薦的套件: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. 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

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 451451451
昨天: 4808480848084808
總計: 5163366516336651633665163366516336651633665163366