1. Color Highlight

誰(shuí)能記住所有十六進(jìn)制代碼?反正我是記不住的。

VSCode 為我們提供了一個(gè)小顏色框作為參考，但它還不夠大，無(wú)法判斷相似顏色之間的差異。Color Highlight 通過(guò)用顏色包裝每個(gè)十六進(jìn)制代碼為我們提供了更大的預(yù)覽。

地址：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

2. SVG Preview

VS Code 具有一個(gè)內(nèi)置的圖像預(yù)覽窗口，但是當(dāng)你單擊.svg文件時(shí)，它僅顯示代碼。

借助 「SVG Preview」，我們會(huì)獲得一個(gè)附加的側(cè)窗，可以預(yù)覽圖像，甚至可以在更改SVG代碼時(shí)進(jìn)行更新。

地址：https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview

3. i18n Ally

幾個(gè)月前，我開(kāi)始使用i18n，不得不說(shuō)它使我的網(wǎng)絡(luò)應(yīng)用本地化為多種語(yǔ)言變得異常容易。唯一的困難是，無(wú)法在實(shí)際處理的文件中編輯翻譯。

相反，必須打開(kāi)locales/language.json文件，向下滾動(dòng)到正確的位置，然后在此處編輯文本(到那時(shí)我們已經(jīng)忘記了要查找的內(nèi)容)。

「i18n Ally」為我們提供了基本語(yǔ)言文本的內(nèi)聯(lián)預(yù)覽，允許咱們創(chuàng)建新鍵，查看現(xiàn)有鍵，并直接從模板中編輯它們。

地址：https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally

i18n Ally還附帶了一個(gè)漂亮的側(cè)邊欄顯示(上)，它向我們顯示完成項(xiàng)目本地化的距離。

4. Code Spell Checker

「Code Spell Checker」 強(qiáng)烈推薦，對(duì)大部分非英語(yǔ)母語(yǔ)又不想寫(xiě)出四不像變量名的程序員來(lái)說(shuō)，正確識(shí)記拼寫(xiě)各種單詞還是有不小的挑戰(zhàn)，比模棱兩可時(shí)需要去查在線詞典不同的是，這款插件能實(shí)時(shí)的識(shí)別單詞拼寫(xiě)是否有誤，并給出提示，不少 bug 都是因?yàn)槠磳?xiě)錯(cuò)誤導(dǎo)致的。

地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

5. JavaScript Booster

「JavaScript Booster」 ：一個(gè)非常棒的重構(gòu)工具，比如將var替換為const或let，移除無(wú)用的else語(yǔ)句，將變量聲明和變量初始化合并。應(yīng)該說(shuō)很大程度上受到 「Webstorm」 的啟發(fā)。

地址：https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

還有一個(gè)額外必要擴(kuò)展!

VS Code Icons

當(dāng)前有超過(guò)四百萬(wàn)的用戶，你可能已經(jīng)在使用此功能，這就是為什么它在此列表中具有很高的優(yōu)勢(shì)。

如果你沒(méi)有，現(xiàn)在就安裝它，讓你在長(zhǎng)長(zhǎng)的文件和文件夾列表中找到你要找的東西的速度快十倍。它為每種文件類型添加的獨(dú)特圖標(biāo)使文件搜索變得直觀而簡(jiǎn)單。

寫(xiě)在最后，希望這5個(gè)擴(kuò)展能對(duì)你有所幫助。