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

【推薦學(xué)習(xí)：《vscode入門教程》】

Code Spell Checker

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

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

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

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

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

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

javascript console utils

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

• Cmd+Shift+L

• Cmd+Shift+D

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

console.log( "abc" , abc )

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

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

GitHub Copilot

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

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

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

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

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

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

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

Import Cost

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

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

VS Code Counter

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

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

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

總結(jié)

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