【圖文並茂】六十多個 vscode 插件，助你打造最強編輯器

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

本文不作任何編輯器的比較，只是我本人平常使用 vscode 進行開發，而且比較喜歡折騰 vscode ，會處處找這一些好玩的插件，因而越攢越多，今天給你們推薦一下我收藏的 60 多個 vscode 插件，聽說插件裝太多，編輯器會變卡，多是個人電腦配置還頂得住，目前並無感受到卡卡的。

接下來我會將會以 優化外觀，功能擴展，提高編碼效率，代碼格式化，其它插件 幾個分類來進行介紹。

一是把它們 分享 給有須要的小夥伴們，二是經過此文向小夥伴們 徵集 其它好玩的插件，能夠是任何類型的。有想要推薦其它插件的請評論區補充一下，我看到後會添加到文章中並標註出你的 ID 。

注：本文只涉及插件的基本使用，也就是讓你知道存在這樣一種插件，以及大體瞭解這個插件能夠作什麼事，部分插件的詳細配置過於複雜，有須要的小夥伴請自行衝浪。根據每一個人電腦，vscode 配置，以及插件的不一樣，部分插件可能在你電腦上不會生效。文中提到的快捷鍵都是 windows 下的，其餘操做系統的快捷鍵請自行了解。

優化外觀

好馬用好鞍，好看的編輯器外觀，能夠提高程序員的編碼體驗，可讓開發人員的心情變好，讓寫 bug 更有動力。

Better Comments

一款美化註釋的插件，能夠根據不一樣種類的註釋，顯示不一樣的顏色，一目瞭然。

安裝完之後，插件會默認自帶幾種顏色的註釋，還能夠經過 vscode 的配置文件自定義任何顏色，類型的註釋。 具體的配置方法我給大家找好了。

👉👉 vscode 插件-better comments-代碼註釋高亮

Bracket Pair Colorizer / Bracket Pair Colorizer 2

這是一個找對象的插件，不是幫大家找對象啊，是幫你找到括號的另外一半。目前有兩個版本，Bracket Pair Colorizer 2 是加強版，具體我沒有深刻研究具體加強了哪些內容。並且它有挺多的設置項，反正安裝完默認的配置已經夠用了，感興趣的同窗自行發覺更多有趣玩法吧。

你們能夠看到配對的括號是相同的顏色，而且當我選中一個括號之後，會出現一條線幫你找到它對應的另外一半括號。

Highlight Matching Tag

這也是一個找對象的插件，找的是標籤的對象，看我上一個插件的演示圖片中，當我點擊一下 html 標籤，配對的標籤就會出現下劃線來指示你誰和誰是一對。

Chinese

讓你的 vscode 變成中文，像我這種英語弱雞纔會用，大佬們略過。爲何要放在優化外觀的分類裏，由於我以爲中文比英文好看🧐🧐，安裝完重啓就好了。

Color Highlight

看名字就知道了，用於給咱們代碼中的顏色進行高亮展現的插件。能夠看到下圖中我設置的 css 顏色屬性，直觀的展現了出來。

Community Material Theme / Material Theme

修改編輯器的主題，內置不少種，我用的是 Material Theme Palenight High Contrast 這一款。安裝完了之後點擊 設置顏色主題 就能夠了。

Material Theme Icons

設置文件圖標的，這個插件的長這個樣子，還有不少其它修改文件圖標的插件，不喜歡這一款的，你們能夠自行找一找。

Error Gutters

報錯的地方都有大紅波浪線提示，能夠說是很是的直觀了。

Image preview

預覽代碼中圖片的引用，鼠標移上去就會有小窗展現圖片。

indent-rainbow

看名字就知道了，彩虹縮進，就是把代碼不一樣的縮進展現不一樣的顏色。

Indenticator

當你點擊一個縮進部分的時候，會出現一條白線來告訴你當前處於的縮進層級，能夠更方便的查看代碼結構。

Trailing Spaces

把尾隨空格顯示出來。

VSCode Great Icons

另外一個修改文件圖標的插件，我用的就是這個，相對於 Material Theme Icons 我更喜歡這個的風格，蘿蔔青菜可有所愛，你們各取所需。

功能擴展

編輯器自身的功能仍是有限的，爲了應付平常開發，不得不安裝不少其餘的軟件進行輔助，不過也能夠經過插件的方式引入一些經常使用的輔助軟件，它們的功能可能沒有原生的強大，可是基本上已經夠用，而且是真的很方便。

AZ AL Dev Tools/AL Code Outline

用來梳理代碼結構的插件，安裝完後在文件圖標裏就會多出一個 AL OUTLINE 的選項。

爲了演示我找了一個比較長，比較典型的 vue 文件，請忽略個人代碼內容，專一於插件的功能🤣🤣， 能夠看到展開第一層是極具 vue 單文件組件特色的 template，script，style。逐層展開就能夠看到 dom 節點， methods 裏面定義的函數等，而後點擊就能夠快速定位到目標所在位置，媽媽不再用擔憂我全局搜啦！

注：它這個裏面好像是默認展開的，應該是能夠設置是否默認展開，但我沒研究過，感興趣的大佬能夠深刻調查一下。

Code Runner

運行代碼，能夠在編輯器中查看結果，前端同窗能夠在控制檯看 console.log ，還有不少其餘玩法，具體使用參考此篇文章

👉👉 VSCode插件推薦 | Code Runner: 代碼一鍵運行，支持超過40種語言

CodeIf

在網上看到一句話，在計算機科學中只有兩件難事:緩存失效和命名。哈哈哈，確實如此，當開發項目時，命名一直都是一種讓人痛苦的事情。

可是命名又是開發過程當中一項很是重要的事情，一個好的函數命名，可以讓你瞬間明白它實現的功能，因此，每當開發過程當中遇到要命名的變量、函數、類時就要左思右想，各類翻譯。

可是，CodeIf 的出現讓這個問題迎刃而解，它經過搜索 GitHub, Bitbucket, GitLab 來找到真實的使用變量名，爲你提供一些高頻使用的詞彙。

使用時只須要選中變量名，而後 右鍵 選擇 CodeIf 就能夠跳轉到網頁，顯示候選命名。

Color Info

查看顏色詳細信息的插件，能夠小窗口顯示顏色值，rgb,hsl,cmyk,hex等等，能夠在配置項裏添加要展現的信息類型。

Code Spell Checker

檢查代碼中單詞拼寫是否正確，當單詞不正常的時候，就會在下方出現波浪線進行提示，還能夠自定義詞典，忽略某個單詞的檢查等，更多用法參考下面連接。

👉👉 VSCode中插件Code Spell Checker

Debugger for Chrome

這款插件是專門爲前端調試開發的，很方便調試，跟谷歌的控制檯是同樣的功能，安裝之後，無需打開瀏覽器的控制檯就能進行斷點調試。對應的還有 Debugger for Firefox，Debugger for Microsoft Edge等，其餘的我沒用過，你們按需安裝便可，使用方法應該都大同小異。

安裝完之後，左邊會出現一個調試的小圖標，打開之後再點擊上方小齒輪進行配置。根目錄下會自動新建 .vscode 文件夾以及 launch.json 文件，不用管。

配置文件的具體內容和使用方法能夠看這一篇，很詳細。

👉👉 VSCode配置 Debugger for Chrome插件

Git History

右鍵單擊文件選擇 Git：View File History 來以列表的形式查看全部的提交記錄。

GitLens — Git supercharged

這個也是跟 git 相關的插件，功能比上一個要強大一些。上一個插件的演示圖片中能夠看到個人每一行代碼都有上一次 git 提交的記錄，那就是這個插件的功勞。

還有其餘不少的操做，詳情查閱下方連接。

👉👉 VsCode中好用的git源代碼管理插件GitLens

LeetCode

能夠在 vscode 中刷算法題的。我本身沒用過😣😣

Local History

這個就很強了，本地代碼的修改記錄。一般咱們寫錯代碼了能夠撤銷，可是撤銷完之後再修改，想要取消撤銷就難了。 有了這個插件直接看代碼的修改記錄。還能夠跟當前版本進行對比，神器。

安裝完之後，項目根目錄下會自動生成 .history 的文件夾。代碼的修改記錄就會放在這裏面。記得添加.gitignore，否則每次提交代碼的時候就要遭重了。

open in browser

在瀏覽器中打開 html 文件。

安裝完之後在目標的 html 文件上右擊，選擇 open in default browser 便可打開使用瀏覽器打開文件。

Partial Diff

文件比較界的大拿確定是 Beyond Compare 了，可是它是收費的！那麼 Partial Diff 這款神奇的插件就成爲了良好的替代品，選中一代碼，右鍵 Select Text for Compare ，選中另一部分代碼，右鍵Compare Text with Previous Selection便可。個人是中文的，就更明顯了🤣🤣

Postcode

Postman 都據說過吧，這個插件就基本上能夠理解爲，在 vscode 裏面使用 postman 。

安裝完之後左側菜單會出現一個 小盒子 的圖標，點開之後點擊 Create Request 就能夠正常使用了。

Project Manager

項目管理器，適用於常常切換項目的大佬，雖然我平時接觸的項目也很少，不過本身搞着玩的工程也很多。有了這個插件，就不用新窗口打開項目了。

安裝完之後左側列表會出現一個 文件夾 的小圖標，點開之後就能夠進行項目管理了，一般都是操做projects.json 這個文件，點擊項目名字就能夠切換了，也能夠新窗口打開。

Quokka.js

實時顯示代碼的運行結果，使用方法請跳轉連接

👉👉 VS Code插件之Quokka.js

提高編碼效率

如何達到極致的編碼效率，固然是能不手寫則不手寫。下面這些插件就是輔助你們進行一些自動化，這樣就能夠節省下不少的時間用來摸魚了。

Auto Import

Typescript 自動導入，其實如今不少的插件基本都內置了這種功能，已經不是必須品了。多是由於我裝了各類奇奇怪怪的插件，我如今想導入什麼東西的時候，一大堆的提示，隨便選一個都能導進來😂

Auto Rename Tag

自動修改標籤名，重命名一個開始標籤時，自動重命名配對的結束標籤。

一會兒就對應的全修改掉了，是否是很 nice。

change-case

快速切換變量格式，什麼大坨峯，小駝峯，下劃線等等，它裏面有不少類型。使用方法按 F1（windows） ，輸入對應命令便可。

CSS Peek

能夠經過點擊類名迅速定位到樣式的定義。不知道是否是我本身的緣由，有的時候會失效，須要點擊 禁用 ，再點擊 啓用 就好使了。具體使用方法參考連接

👉👉 cssPeek插件大大提高你的開發效率

ECMAScript Quotes Transformer

用於 模板字符串 和 普通字符串拼接 的相互轉化，但其實我平常開發基本上都是統一使用模板字符串的，不多有這種互相轉化的需求。

用法也是很是簡單，選中須要轉化的行，按 f1 輸入命令便可，通常輸入 esq 就出現提示了。

embrace

快速的在選中代碼兩邊添加各類引號、括號，不用來回移動光標，不過好像如今市面上的編輯器大多都內置這功能了吧🤨🤨

File Utils

建立，複製，移動，重命名，刪除文件和目錄的便捷方法，演示圖片來自官網。

javascript console utils

前端人員的調試少不了 console.log ，那麼這就是一款快速生成 console.log 的插件。使用方法很是簡單， 選中變量，而後按 ctrl + shift + L 就能夠生成了。須要刪除的時候按 ctrl + shift + D 便可刪除。

json2ts

自動把 json 格式轉成 ts 的類型，複製 json 以後按 ctrl + alt + v 便可。

koroFileHeader

自動添加 頭部註釋 和 函數註釋 的插件。支持自定義內容，須要在 settings.json 中進行自定義配置。

//自動生成註釋插件 文件頭部註釋
  "fileheader.customMade": {
    "Author": "一尾流鶯",
    "Description": "",
    "Date": "Do not edit",
    "LastEditTime": "Do not edit",
    "FilePath": ""
  },
  //自動生成註釋插件 函數註釋
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },
複製代碼

Mithril Emmet

快速生成代碼結構，不過好像新版本 vscode 已經內置了。

Path Intellisense

引入文件的時候，路徑自動補全。

Npm Intellisense

導入 npm 包的時候，智能提示。

px to rem & rpx (cssrem)

自動換算單位的插件。

很簡單，出現提示之後回車便可。

Turbo Console Log

另外一個用來生成 console.log 的插件，不一樣的是，他支持自定義 console.log 的內容，包括文件名，路徑，大小等，還能夠添加本身喜歡的 emoji 表情，快捷鍵 ctrl + alt + L。

代碼片斷類插件

這一類的插件都不少，但功能都是提供代碼片斷，做用就是使用幾個字符的簡寫，就能夠敲出整段代碼。

• JavaScript (ES6) code snippets
• Jest Snippets
• HTML Snippets
• Vue VSCode Snippets
• Vue 3 Snippets
• ... ...

代碼格式化

Beautify

用來代碼格式化的，可是我好像安裝了沒怎麼用，我一直都是 eslint + prettier，有正在用的小夥伴能夠在評論區發表一下見解，感興趣的請本身搜索使用方法。

ESLint

這個就不用說了吧，代碼檢查，不符合規範的就會跟你報錯，或者警告。具體的規範須要在根目錄下新建 .eslintrc.js 文件去配置，也能夠用不少大公司現有的規範，太複雜了就不細講了，貼出教程連接。

👉👉Eslint 超簡單入門教程

Prettier - Code formatter

代碼格式化插件，這個插件一般搭配 eslint 使用，也能夠單獨使用。

在根目錄下新建 .prettierrc.json 文件，在裏面書寫本身想要的格式就好了。更具體的配置內容查看連接

👉👉 # vscode 使用Prettier插件格式化配置使用

vetur / volar

使用 vue 進行開發的小夥伴都少不了跟它們打交道，volar 是跟 vue3 更配的，功能也能多，因爲這兩個插件功能過於龐大，就不展開講了，感興趣的自行搜索使用。

其餘好玩的插件

除了功能性插件，固然還有不少花裏胡哨的玩意。下面給你們介紹幾款可能對開發影響不大，可是很是好玩的插件。

小霸王

還記得小時候玩的手柄遊戲嗎？大佬已經給咱們出了插件了，不過我仍是要友情提醒一句：遊戲有風險，摸魚需謹慎！

操做很是簡單，安裝完左側會出現遊戲手柄圖標，點擊打開就能夠下載遊戲進行玩耍。

Emoji

在代碼中添加 emoji 表情，我本身除了寫一些註釋，console.log 以外，基本沒有別的做用，可是挺好玩的，別人看你的代碼中各類小表情，也會以爲你是一個可愛的人吧。

它的官方示例裏面還能夠把 emoji 設爲變量名，我可不建議大家這樣作。使用方法也是很是的簡單，按 f1（windows） 輸入 emoji ，能夠看到有三個選項，分別是 emoji 表情，markdown 下的 emoji，還有 unicode 下的 emoji。選中一個模式回車進入列表，再回車就能夠輸入到代碼中了。

Settings Sync

能夠同步 vscode 配置的插件，因爲我沒有換過電腦，因此還沒親測，可是網上用的人仍是蠻多的。

彩虹屁插件

參考

感受有用的小夥伴請點個👍，有其它插件分享的請在評論區留言，謝謝啦！

VSCode配置 Debugger for Chrome插件

vscode 插件-better comments-代碼註釋高亮

VSCode插件推薦 | Code Runner: 代碼一鍵運行，支持超過40種語言

VSCode中插件Code Spell Checker

cssPeek插件大大提高你的開發效率

Eslint 超簡單入門教程

VsCode中好用的git源代碼管理插件GitLens

# vscode 使用Prettier插件格式化配置使用

VS Code插件之Quokka.js