VScode 對于前端同學來說絕對是非常熟悉的，大家多多少少都有幾個自己非常中意的插件。最近經過自己的探索以及同事的推薦，結合實際開發，甄選出了幾款對實際開發效率非常有幫助的 VScode 插件。

【推薦學習：《vscode入門教程》】

Code Spell Checker

Code Spell Checker 是一個用于檢查單詞拼寫的插件。

“研表究明，漢字序順并不定一影閱響讀” 在咱們開發的過程中，常常會有變量命名拼寫錯誤的情況，如果 review 的小伙伴認真看的話還能分辨出來，但是有的時候單詞的拼寫順序錯誤是不會影響閱讀的，中文咱們都常常看不出來，更何況英文呢？

這時候 Code Spell Checker 就可以派上用場了，安裝插件后，如果有拼寫錯誤就會有 波浪線 提示

例如上圖中的 Delete 單詞在全大寫的情況下，缺少了一個字母是很難在開發的過程中發現的，如果這時為了省時間或者使用代碼提示在別處大量使用了這個錯誤的單詞，整體的代碼相對而言就不規范了，也有可能產生意料外的 bug 。

使用了插件后，不僅會提示你拼寫錯誤的單詞，而且將鼠標懸浮在錯誤單詞上，選擇 快速修復 ，還會彈出可能是正確單詞的提示，這一點就非常的友好啦。

當初第一次安裝了這個插件就發現的當前的項目中有兩個單詞是拼寫錯誤的，并且還在多處引用，于是及時修改了一波。這也說明這個插件在實際開發中的幫助是很大的～

javascript console utils

很難相信，一個十四萬下載量的插件竟然沒有圖標。 javascript console utils 的用處就一個，它為你提供了兩個快捷鍵：

• Cmd+Shift+L

• Cmd+Shift+D

當你選中一個變量 abc 時，按第一組快捷鍵就會在當前代碼底下插入一行 :

console.log( "abc" , abc )

而第二個快捷鍵則是用于刪除插入的那一行代碼，官方的示例圖如下：

但凡是寫過 js 的程序員都了解簡單的兩組快捷鍵對于實際的開發效率提升有多大，這種簡單且直擊人心的插件千萬不能錯過?

GitHub Copilot

相比前面兩款插件，GitHub Copilot 了解的人應該會多一些，官方對它的描述是 一個隨時與你結伴開發的 AI 程序員 ，表現在開發中就是一個 ai 的代碼提示插件，會根據你當前輸入的上下文結合 AI 為你提供代碼提示。

在最近一段時間的開發中，這款插件已經不止一次讓我感到震驚了，甚至有點恐怖。不論是方法，變量，甚至是注釋，它都能給你提示，而且有時準的讓你感到害怕

上圖是我在些一個按鈕組件時，不知不覺寫了太多的屬性，當我想要在標簽上面做一下對象解構讓代碼更加清晰的時候，我只打了一個 const ，GitHub Copilot 就幫我想做的事情給提示出來了，你無法想象它是怎么根據一個 const 去分析后面的代碼。

而這還只是小兒科，在實際使用里，無論是變量，常量，方法，hook，它都能給你推斷出來你需要的代碼。當初我認為，這樣的 AI 對于程序員來說是具有打擊性的，是否未來就不需要程序員了呢？

但在實際使用的時候，它真的 很懂你 ，它并不是無緣無故給你提示一堆代碼，而是基于當前已有的業務邏輯，判斷你現在需要什么，它就貼心的幫你提示出來。

例如上圖，我在這個類型前定義了一個 常量，它已經為我推測好我這里需要用什么類型了，這也恰好是我需要的，當代碼量一大，一天下來可能百分之六十的代碼都是 GitHub Copilot 為你提示的。

之前我使用這個插件是需要申請的，不知道目前是什么情況，強烈建議大家下載來玩一玩試一試～

Import Cost

Import Cost 這個插件的使用很簡單，直接安裝，安裝后我們在 js 或者 ts 中引入的依賴后面顯示依賴的大小，官方的示例圖如下：

實際使用時效果如下，有的時候一些可替代的第三方依賴用來判斷哪個更加輕量會更加的方便。

VS Code Counter

VS Code Counter 可以用于統計你的代碼行數，有的時候你接手一個大型項目（shit mountain）的時候，你想跟你的小伙伴吐槽你在維護一個巨型項目，具體有多巨型你就可以通過這個插件來計算一下代碼并展示給其他人看（攀比）

使用方法是在安裝插件后，點擊 Vscode 頂部菜單 查看 -> 命令面板 ，輸入 count ，選擇下圖中的選項，就會為你統計當前工作區目錄的所有代碼。

統計后的報告會以語言為分類展示總體代碼量，報告中還有各個目錄具體的代碼量。

總結

這次推薦的這幾款插件都不會與某一種語言或者框架強關聯，適用性很廣，因此小伙伴們都可以安裝來試試看，如果大家有自己珍藏的優秀插件也歡迎評論區分享～