VSCode 好用套件

發表於 更新於 分類於 閱讀次數： Disqus：

羅列出部分目前較喜歡用的 VSCode 套件，套件的細節請自行參考官網

生產力套件

Code Spell Checker

英文拼字檢查套件，用這個套件的原因就是為了避免人工輸入錯誤，造成 debug 的問題，至少不會再出現你以為你打對了，結果卻因為拼寫錯誤然後 debug 半小時的蠢事

ASP.NET Core Switcher

在 View 與 Controller 之間快速切換，這功能大概就是 VisualStudio 系列的快捷鍵 Ctrl+G 的功能，現在在 VSCode 只要按下 Alt+O 就可以快速切換，省去在檔案列表中尋找檔案的麻煩，當然如果已經用習慣 Ctrl+P 再 keyIn 檔案名稱搜尋的人，也可以參考一下這個快捷鍵來加速你的開發

這個快捷鍵如果是在 Razor Page，是切換到 PageModel 去；如果是 MVC，會切換到 View，且在 MVC 的話還可以用 Alt+I 也是可以的

另外也可以快速建立 View，透過 Alt+P 直接建立相對應的 View 檔案，這功能也是非常實用的，只是建立之後要再按下 Alt+O 跳過去，我還以為他會自動幫我跳過去，有點不習慣。

HexDump for VSCode

平常用不到，但需要的時候會感謝有這套外掛，他能夠將檔案轉為 16 進制的格式呈現，看起來有點像是 dos 時代pctools 9.0的工具；一般來說我用的到的機會就是檢查文字檔的開頭編碼屬於哪一種檔案，用來判斷是不是 UTF-8，又或是拿來查文字檔某段文字的實際編碼，後來使用了Gremlins tracker for Visual Studio Code之後，也不再需要用這套了

Settings Sync

同步 VSCode IDE 設定、套件的工具，以前有寫過一篇介紹：VSCode 設定同步及程式碼片段

開發工具套件

cdnjs

在編輯器內就可以引用 lib，不需要再到處找套件的 cdn

ESLint

ESLint 的介紹先前有寫過一篇介紹文：如何在 IDE 中使用 ESLint 自動格式化文件，有興趣可以參考一下；這邊提一下 VSCode 在存檔時自動依照 ESlint 格式化並自動修正錯誤的設定

1
2
3
4
5
6
7
8
9
10
11
12
"eslint.alwaysShowStatus": true,
// 使用ESLint作為Formatter，需禁用其他的Formatter
"eslint.format.enable": true,
// 不使用formatOnSave，採用codeActionsOnSave，因為可以設定的更細緻
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
},
// js 預設的 formatter
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

Gremlins tracker for Visual Studio Code

這個套件能夠提醒你，程式碼如果有看起來像是合法字元，或是不可見的字元出現，在很多時候，程式碼中若包含了這些東西，很可能會引發預期之外的錯誤，通常發生這些問題會很難追查

可以搭配外掛 Unicode code point of current character，就能夠在狀態列顯示當前游標的字碼是多少

Quokka.js

這一套可以即時取得程式碼的執行結果，而另外一套wallaby.js則是適用於 TDD 開發流程的套件，這兩個套件好用是好用，但是比較痛苦的是設定；好在官網也盡量提供了各式各樣環境的 sample，放在 Github，或多或少有幫助

Regex Previewer

一套簡單易用的 regex 測試工具，只要按下 Ctrl+Alt+M，就會開啟一個編輯區塊，這時候只要你開啟的檔案是javascript，在 regex pattern 上面會出現一個Test Regex的按鈕，按下去就可以看到有哪些是 match 的

視覺套件

  1. Bracket Pair Colorizer：括號的顏色顯示外掛，可以更顯著的 將對應的括號顯示出來

自動補完相關套件

  1. Auto Complete Tag：結合了兩個套件Auto Close Tag、Auto Rename Tag的功能；自動幫你補上關閉標籤，更改 Tag 名稱的時候，關閉標籤的名字也會一起改
  2. AutoFileName
  3. Path Autocomplete
  4. Path Intellisense

Git 相關套件

  1. .gitignore Generator：git ignore 檔案產生器，使用簡單
  2. git-autoconfig：用這個套件可以在專案打開的時候先確認要用哪一個帳號做 commit
  3. GitLens — Git supercharged：Git 的很多功能都補強了，細節還是參照官網介紹吧