程式筆記: VSCode安裝/中文化/擴充套件功能/快捷鍵/程式碼片段

VSCode是用過的編輯器是又精簡迅功能與擴充功能又齊全的編輯器了，並且擴充套件也都有簡易教學，所以記錄一下安裝過程以及實用的擴充套件，還有一個實用套件但是因為用用久了會吃記憶體所以後來不裝的擴充套件。

安裝VSCode

連結到官方網站下載並安裝 https://code.visualstudio.com/

安裝中文化套件

在擴充功能中搜尋"Chinese (Traditional) Language Pack for Visual Studio Code"並且安裝，重新啟動後就會是中文介面了

安裝其他擴充套件(以PHP為主)

Auto Close Tag 可以自動補齊HTML的tag
Auto Rename Tag 可以同時重構起始與結束標籤的名稱
Better Align 可以將程式碼對齊，對於有對齊癖的我來說是很省時的一個套件
Better Comments 將註解中的關鍵字用不同顏色顯示出來
Bracket Pair Colorizer 會幫忙標註括號的顏色，不同層的括號會用不同顏色區分，也是個很方便實用的小工具 => 已經成為VSCode內建功能,可參考這裡觀看如何設定
Code Spell Checker 自動檢查拼字是否有誤，容易排除一些基本打錯字的問題
GitLens 可以顯示git最後修改的人員跟時間，並且可以直接在vscode上做版本管控，類似TortoiseGit的vscode版本
Guides 在程式式碼巢狀時會以線段方式提醒巢狀的範圍
Expand Selection To Scope 滑鼠點兩下可以選取到外層括號的範圍
Laravel Blade formatter
Laravel Blade Snippets 讓VSCode支援Laravel Blade的程式碼片段
Laravel Goto
Laravel goto view 可以轉跳到對應的Blade檔案
Laravel Snippets 讓VSCode支援Laravel的程式碼片段
Laravel-goto-controller 可以開啟對應的Controller檔案
Material Icon Theme 可以區別各種不同的檔案圖示
One Dark Pro 編輯器程式碼主題包
PHP Intelephense 這個套件看起來是包山包海，不過其實我主要是想要其中可以go to Define的功能
Remote Development vscode用來ssh遠端工作的套件, 教學網址https://code.visualstudio.com/docs/remote/ssh, 用起來不太會頓, 而且安裝也滿容易的
TODO Highlight 可以將TODO特別標示出來
Todo Tree 在vscode左邊會產生一個樹的icon，會將程式碼裡的TODO統整歸納起來
Vetur Vue的套件
power mode 有玩過一下子，覺得打字起來滿有意思的，不過有點影響我工作，所以後來沒裝了
tabNine 將打過的字存為程式碼片段，越使用越好用的程式碼片段套件，但是用了一陣子後發現會非常耗效能，所以後來就移除了

VSCode快捷鍵

Go To Bracket「Ctrl+Shift+|」跳轉到對應括號的功能，我會修改成「Ctrl+B」
「Ctrl+D」可以選取目前游標中的詞彙，不用用鍵盤吃力的向左或向右選取
「Ctrl+Shift+L」可以選取正篇文章中目前游標中的詞彙
Go Back「Alt+LeftArrow」向前，在跳到別的function或method的時候很好用，可以立即回到轉跳前的畫面，我會修改成「Ctrl+`」；相對的Go Forward「Alt+RightArrow」向後，搭配向前的功能，有時候看完前面的程式碼會再回到目前正在修改的地方，一前一後搭配起來很好用，我會修改成「Ctrl+1」
Go To Definition「F12」等於是「Ctrl+左鍵」的功能，但是常常手就放在鍵盤上，不想伸手過去使用滑鼠，我會修改成「Ctrl+2」更便於使用
Change Language Mode「Ctrl+K M」變更語言模式，最近常用vscode來看json格式的資料，但是每次都要到右下角選擇文件的語言模式有點麻煩，上網也沒有找到自動偵測的套件，所以另外找了快捷鍵至少不用動到滑鼠去點擊，我會修改成「Alt+Q」
Format Code「Ctrl+Shift+F」格式化程式碼，將程式碼依照開啟格式優化排版
editor.action.joinLines「無」將選取得程式碼合併成一條，預設是沒有快捷鍵，這個功能很適合用在JSON格式展開後要還原使用，我將它設定為「Alt+Shift+G」，因為文件排版是「Alt+Shift+F」展開再還原就在旁邊，滿好記的
「Ctrl+E」或「Ctrl+P」以程式名稱搜尋檔案
「Alt+G」跳到指定行數，應該是所有編輯器的共用快捷鍵
「Ctrl+F」開啟搜尋視窗，應該是所有程式的共用快捷鍵
「Ctrl+Y」還原下一步
「Ctrl+Z」還原上一步
「Alt+Shift+I」將匡選起來的行, 指標移到程式碼最末端
「Ctrl+Alt+Shift+上/下/左/右/PageUp/PageDown」指標選擇多列

參考以下網址

VS Code折腾记 - (2) 快捷键大全，没有更全

VS Code 切換文件語言配置語言特定的設置

VSCode自訂程式碼片段

        "print to calculating time start":{
        "prefix":"etsz",
        "body": [
            "$$count_time$0 = microtime(true);"
        ],
        "description":"print to calculating time start"
    },
    "print to calculating time end":{
        "prefix":"etez",
        "body": [
            "echo \"$0Time Used: \".(microtime(true) - $$count_time).\"s<br />\";"
        ],
        "description":"print to calculating time end"
    },
    "print to console.log":{
        "prefix":"coz",
        "body": [
            "console.log($0)"
        ],
        "description":"print to console.log"
    },
    "print to php echo":{
        "prefix":"ecz",
        "body": [
            "echo '$$data = ' . $$data$0 . '<br />';"
        ],
        "description":"print to php echo"
    },
    "print die to test":{
        "prefix":"diz",
        "body": [
            "die($0);"
        ],
        "description":"print die to test"
    },
    "print to php print_r":{
        "prefix":"prz",
        "body": [
            "echo '<h1>$$data$0</h1>';echo \"<pre>\";print_r($$data$0);echo \"</pre>\"; "
        ],
        "description":"print to php print_r"
    },
    "print to php print_r and die":{
        "prefix":"prdz",
        "body": [
            "echo '<h1>$$data$0</h1>';echo \"<pre>\";print_r($$data$0);echo \"</pre>\"; die;"
        ],
        "description":"print to php print_r and die"
    },
    "print laravel SQL log starting":{
        "prefix":"eqsz",
        "body": [
            "\\Illuminate\\Support\\Facades\\DB::enableQueryLog();"
        ],
        "description":"print laravel SQL log starting"
    },
    "print laravel SQL log endding":{
        "prefix":"eqez",
        "body": [
            "echo \"<pre>\";var_dump(\\Illuminate\\Support\\Facades\\DB::getQueryLog());echo \"</pre>\";"
        ],
        "description":"print laravel SQL log endding"
    },
    "translated blde code":{
        "prefix":"__b",
        "body": [
            "{{ __('global.$0') }}"
        ],
        "description":"fast blade translated code"
    },
    "translated php code":{
        "prefix":"__p",
        "body": [
            "__('global.$0')"
        ],
        "description":"fast php translated code"
    },
    "return response json":{
        "prefix":"resjson",
        "body": [
            "return response()->json($0);"
        ],
        "description":"js response code"
    },

瀏覽器快捷鍵

可以參考我的另一篇文章瀏覽器快捷鍵有很多開發時候會用到的快捷鍵，並且不少都是VSCode也適用的快捷鍵

Windows10快捷鍵

可以參考我的另一篇文章 Win10 快捷鍵有很多開發時候會用到的快捷鍵

參考：