小克的 Visual Studio Code 必裝擴充套件（Extensions）私藏推薦

 沒錯，又是私藏推薦系列，不過這次是 Visual Studio Code。
（上一篇：小克 2017 不能沒有、2018 一定繼續用的必裝 app 下載私藏推薦 (Android/iOS)）

從 Sublime Text 3 跳到 VS Code 一陣子了，在微軟及社群頻繁的維護與更新下，總算是越用越順手。VS Code 擴充功能（Extensions，俗稱擴充套件）的生態也算是越來越完整，一點也不輸給 Sublime Text 或是 Atom 的外掛或擴充套件。

算一算裝的擴充功能也有數十種了，到了要整理的地步（笑），那就寫一篇來記錄一下好了，這篇也會持續更新。我平時主力為 Laravel/PHP 開發，所以會有比較多 Laravel 和 PHP 的相關套件。

所以以下就是我的私人珍藏、必裝、必備、必下載、不裝不行的 VS Code 擴充功能。（直接拿 app 那篇來改 XDDD）
如果你有喜歡的其他擴充功能沒列到，也歡迎留言告訴我（各種方面的都歡迎建議）


來放一個官方的圖給 Facebook 抓預覽

目錄

Changelog

  • 2019.06.03 新增以下工具
    • Markdown 相關工具
    • Swagger 文件相關工具
    • Todo Tree
    • Prettier
    • Docker
    • Laravel goto view、Laravel-goto-controller
  • 2019.06.03 VSCode PHPUnit 更名為 PHPUnit Test Explorer
  • 2018.08.03 新增 PHPUnit Snippets
  • 2018.08.03 將 Better PHPUnit 替換成更好用的 VSCode PHPUnit
  • 2018.04.02 裝回 Git History
  • 2018.03.27 使用者設定中新增 emmet 和 trimTrailingWhitespace 設定
  • 2018.03.24 新增使用者設定
  • 2018.03.24 新增 Fira Code
  • 2018.03.24 初版

效率提升強烈推薦類

這個區塊表列的，應該是不裝我會覺得渾身不對勁的的擴充功能 😂

  • Fira Code（安裝方法在此）
    首先推薦的這個不是套件，而是字體，強烈建議安裝，爽度提昇超多！

  • Settings Sync
    如果你有多台電腦，可以幫你同步設定檔和安裝的套件（透過 GitHub Gist），支援背景自動同步

  • Auto Close Tag
    被 Sublime Text 慣壞的必裝，會幫你把右括號或結束標籤補上。現在 VS Code 有內建基本補完功能了，但是他支援更多符號和設定，例如我喜歡打 </ 的時候也幫我補上 HTML close tag。

  • Guides
    這工具我找超久！在你的程式開關符號（例如左右大括號）拉一條線，方便你識別程式區塊

  • TODO Highlight
    Highlight 你的 TODO、FIXME 註解，還可以幫你統整整個專案的 TODOs

  • Todo Tree
    以樹狀目錄方式統整整個專案的 TODOs

Git 相關必備外掛

輔助使用，還是喜歡直接使用 GitKraken、SourceTree 或直接 Terminal 操作。

  • Git History
    原本把這個套件移除了，結果又裝回來。這個套件的主要功能，就是可以方便查看 Git 紀錄以及檔案歷史，甚至是 Line History！並可直接連結到變更的檔案。介面比下面的 GitLens 方便得多。

  • GitLens — Git supercharged
    必備的全能 Git 擴充功能。我最喜歡的功能是閃爍游標指到哪一行他就會顯示該行的 Git Blame，可以快速查看是哪個 commit 修改的。他竟然有自己的設定頁面，其他擴充功能快跟上好嗎！
    噢對了，它的缺點是會塞很多功能在右鍵，不喜歡的話記得去設定調整。

Sublime Text 情懷必裝

從 Sublime Text 搬過來嗎？

  • Sublime Commands
    把一些 Sublime Text 好用的游標功能搬過來 VS Code，例如 Transpose、選取整行、行列合併、快速指定多行游標等

  • Sublime Text Keymap
    把 Sublime Text 的快速鍵對應到 VS Code 的相對功能上

通用加分工具

這裡應該是寫什麼語言都適用的好用工具

  • EditorConfig for VS Code
    統一專案中檔案的編輯風格，這個就沒有圖片示例了，可以查一下 EditorConfig 的功能。

  • Search Docsets
    查詢文件的輔助工具，支援 Dash、Velocity、Zeal

  • advanced-new-file
    我裝的是 patbenatar 做的版本，可以很快速的在指定目錄建立新的檔案

  • DotENV
    讓 .env 檔也有 syntax 效果

  • Expand Selection To Scope
    可以外擴滑鼠點兩下的選取範圍

  • File Utils
    方便檔案處理使用，複製、移動、改名、刪檔

  • Docker
    方便管理及操作 Docker Image、Container 的官方工具

Markdown 相關

Swagger 文件相關

  • Swagger Viewer
    在撰寫 Swagger OpenAPI 文件時可以方便地預覽

  • YAML
    讓 VSCode 支援 YAML 格式

JavaScript / Vue

身為工程師，總是要碰一點 JS。

Laravel 相關必載工具

Laravel 是目前 GitHub 開源專案中最多 Star 的後端框架哦！比 Rails、Django、Express 都還高。

  • Laravel 5 Snippets
    台灣社群 Winnie Lin 的版本。讓 VS Code 支援 Laravel 程式碼片段

  • Laravel Artisan
    在 VS Code 直接執行 php artisan 的功能，更棒的是可以直接看 route list！

  • Laravel Blade Snippets
    一樣是台灣社群 Winnie Lin 的版本。這次是讓 VS Code 支援 Laravel Blade 的程式碼片段

  • Laravel goto view
    方便在程式碼中直接跳轉開啟對應的 Blade 檔案

  • Laravel-goto-controller
    方便在 Route 中直接跳轉開啟對應的 Controller 檔案

PHP 相關推薦

PHP 7 強勢再起，不要再鄙視他了 QQ

Python 專區

簡單好用又強大的語言。

  • Python
    就是 Python 的集大成擴充功能，已經由微軟官方親自維護

外觀個人喜好區

我就只是個 Material Design 粉。

使用者設定

最後附上我的 settings.json 提供參考

{
  "auto-close-tag.fullMode": true,
  "blade.format.enable": true,
  "diffEditor.ignoreTrimWhitespace": true,
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 18,
  "editor.formatOnPaste": true,
  "editor.lineHeight": 32,
  "editor.renderIndentGuides": false,
  "editor.renderWhitespace": "boundary",
  "editor.scrollBeyondLastLine": false,
  "editor.snippetSuggestions": "top",
  "emmet.includeLanguages": {
    "blade": "html"
  },
  "emmet.triggerExpansionOnTab": true,
  "files.trimTrailingWhitespace": true,
  "gitlens.advanced.menus": {
    "editorContext": {
      "blame": false,
      "copy": false,
      "details": false,
      "fileDiff": false,
      "history": false,
      "lineDiff": false,
      "remote": false
    },
    "explorerContext": {
      "fileDiff": false
    }
  },
  "gitlens.advanced.messages": {
    "suppressResultsExplorerNotice": true
  },
  "gitlens.blame.heatmap.location": "left",
  "gitlens.codeLens.scopes": ["document"],
  "gitlens.gitExplorer.files.compact": false,
  "gitlens.hovers.currentLine.details": false,
  "gitlens.statusBar.command": "gitlens.showQuickFileHistory",
  "guides.active.color.dark": "rgba(120, 120, 120, 0.75)",
  "guides.normal.style": "none",
  "guides.stack.enabled": false,
  "php.suggest.basic": false,
  "php.validate.run": "one",
  "php-cs-fixer.onsave": true,
  "python.formatting.provider": "yapf",
  // "python.venvPath": "~/.pyenv",
  "sublimeTextKeymap.promptV3Features": true,
  "sync.askGistName": false,
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": false,
  "sync.gist": "你的 GIST 位置",
  "sync.host": "",
  "sync.lastDownload": "2018-03-22T02:34:44.923Z",
  "sync.lastUpload": "2018-03-24T10:12:21.567Z",
  "sync.pathPrefix": "",
  "sync.quietSync": true,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true,
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.fontFamily": "Roboto Mono for Powerline",
  "terminal.integrated.fontSize": 17,
  "terminal.integrated.lineHeight": 1.5,
  "window.openFilesInNewWindow": "on",
  "window.zoomLevel": -0.5,
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme"
}

本著作由小克製作，以創用 CC 姓名標示-相同方式分享 4.0 國際 授權條款釋出。
本篇永久網址：http://goodjack.blogspot.com/2018/03/visual-studio-code-extensions.html