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

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

Code Spell Checker

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

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

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

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

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

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

javascript console utils

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

• Cmd+Shift+L

• Cmd+Shift+D

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

console.log( "abc" , abc )

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

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

GitHub Copilot

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

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

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

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

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

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

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

Import Cost

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

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

VS Code Counter

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

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

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

總結(jié)

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