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

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

Code Spell Checker

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

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

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

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

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

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

javascript console utils

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

• Cmd+Shift+L

• Cmd+Shift+D

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

console.log( "abc" , abc )

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

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

GitHub Copilot

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

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

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

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

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

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

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

Import Cost

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

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

VS Code Counter

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

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

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

總結(jié)

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