:::

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

一、安裝前準備

  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": "C:/laragon/bin/php/php-7.2.11-Win32-VC15-x64/php.exe",
    }

二、安裝套件:

  • Chinese (Traditional) Language Pack for Visual Studio Code:中文介面
  • phpfmt:格式化PHP程式碼用,請加入設定(php.exe的實際路徑請視實際情況修改
    // php executable path
    "phpfmt.php_bin": "C:/laragon/bin/php/php-7.2.11-Win32-VC15-x64/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,
  • TabNine:逆天的自動補齊程式碼功能,詳見報導

  • 不過癮的話,這裡還有更多他人推薦的套件: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

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1374

計數器

今天: 880880880
昨天: 1888188818881888
總計: 6223579622357962235796223579622357962235796223579