小克的 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)
如果你有喜歡的其他擴充功能沒列到,也歡迎留言告訴我(各種方面的都歡迎建議)


Changelog

  • 2018.04.02 裝回 Git History
  • 2018.03.27 使用者設定中新增 emmet 和 trimTrailingWhitespace 設定
  • 2018.03.24 新增使用者設定
  • 2018.03.24 新增 Fira Code
  • 2018.03.24 初版

效率提升強烈推薦類

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

  • Fira Code安裝方法在此
    首先推薦的這個不是套件,而是字體,強烈建議安裝,爽度提昇超多!
    enter image description here

  • Settings Sync
    如果你有多台電腦,可以幫你同步設定檔和安裝的套件(透過 GitHub Gist),支援背景自動同步
    enter image description here

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

  • Guides
    這工具我找超久!在你的程式開關符號(例如左右大括號)拉一條線,方便你識別程式區塊
    enter image description here

  • TODO Highlight
    Highlight 你的 TODOFIXME 註解,還可以幫你統整整個專案的 TODOs
    enter image description here


Git 相關必備外掛

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

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

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


Sublime Text 情懷必裝

從 Sublime Text 搬過來嗎?

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

通用加分工具

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


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!
    enter image description here
  • Laravel Blade Snippets
    一樣是台灣社群 Winnie Lin 的版本。這次是讓 VS Code 支援 Laravel Blade 的程式碼片段

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": "onSave",
    "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