作者 | Ashutosh Singh

譯者 | 彎月

出品 | CSDN（ID：CSDNnews）

VisualStudio Code是開(kāi)發(fā)者社區(qū)最流行的一款編輯器。理由之一就是VSCode有許多擴(kuò)展，可以提高開(kāi)發(fā)的效率。

在本文中，我們將介紹每一位開(kāi)發(fā)人員都應(yīng)該了解的10款VSCode擴(kuò)展。

Auto Rename Tag

AutoRename Tag是一款面向Web開(kāi)發(fā)人員的VSCode擴(kuò)展。顧名思義，Auto Rename Tag可以在一個(gè)標(biāo)簽更改時(shí)自動(dòng)更新另一個(gè)標(biāo)簽：

這款擴(kuò)展不僅可以在HTML中使用，也可用于React，因?yàn)镽eact使用了JSX：

上述示例中標(biāo)簽內(nèi)只有一個(gè)文本，但是在真正的應(yīng)用程序中，大量的標(biāo)簽和元素嵌套在一起，手工更新非常困難且麻煩。

Bracket Pair Colorizer

這款擴(kuò)展可以將匹配的括號(hào)染成相同的顏色。同一個(gè)文件內(nèi)嵌套的組件、函數(shù)、對(duì)象等帶來(lái)的大量括號(hào)很容易讓人摸不著頭腦：

例如下述代碼示例：

第一眼看上去，區(qū)分不同的代碼塊很困難，但是Bracket Pair Colorizer擴(kuò)展可以將對(duì)應(yīng)的括號(hào)著色，方便瀏覽代碼和閱讀：

代碼片段

代碼片段是節(jié)約時(shí)間提高生產(chǎn)力的最好辦法。這并不是一個(gè)擴(kuò)展，而是多種語(yǔ)言的各種擴(kuò)展。

下面是一些流行的代碼片段擴(kuò)展：

• Angular Snippts (version 11)

• Python

• JavaScript (ES6) code snippets

• HTML Snippets

• ES7 React/Redux/GraphQL/React-Native snippets

• Vue 3 Snippets

例如，在React中創(chuàng)建新組建時(shí)，輸入函數(shù)式組件的語(yǔ)法非常繁瑣。使用ES7React/Redux/GraphQL/React-Native snippets擴(kuò)展，只需要輸入rfc并按回車(chē)即可創(chuàng)建函數(shù)式組件。

Better Comments

BetterComments可以幫助你編寫(xiě)便于閱讀的注釋。

清晰、方便理解的注釋不僅對(duì)閱讀代碼的人有好處，對(duì)自己也非常有用。開(kāi)發(fā)人員經(jīng)常會(huì)遇到這種情況：過(guò)一段時(shí)間之后，閱讀自己的代碼都有困難。而編寫(xiě)描述性的注釋對(duì)于自己和團(tuán)隊(duì)都有好處。

使用Better Comments擴(kuò)展，你可以將注釋分為警告、詢問(wèn)、待辦、重點(diǎn)等幾大類(lèi)。

在雙斜線后面使用下述字符做標(biāo)記：

• * 表示重點(diǎn)

• ! 表示錯(cuò)誤和警告

• ? 表示詢問(wèn)和問(wèn)題

• // 表示刪除

• TODO 表示待辦事項(xiàng)

Markdown All in One

MarkdownAll in One可以處理所有的markdown需求，例如自動(dòng)預(yù)覽、快捷鍵、自動(dòng)完成等。

從2004年發(fā)布以來(lái)，Markdown已成為最流行的標(biāo)記語(yǔ)言之一。技術(shù)作者廣泛使用Markdown轉(zhuǎn)寫(xiě)文章、博客、文檔等，因?yàn)樗州p便、簡(jiǎn)單，而且可以在多個(gè)平臺(tái)上使用。它的流行帶動(dòng)了許多Markdown變體的出現(xiàn)，如GitHub Flavored markdown、MDX等。

例如，要在Markdown中加粗字體，只需要選中文字按快捷鍵Ctrl+B即可，這樣可以提高生產(chǎn)力。

圖標(biāo)

描述性的圖標(biāo)可以幫你區(qū)分不同的文件和文件夾。圖標(biāo)也讓開(kāi)發(fā)過(guò)程更有趣。

下面是兩個(gè)VSCode標(biāo)簽頁(yè)的比較。一個(gè)有圖標(biāo)，另一個(gè)沒(méi)有。

有許多圖標(biāo)擴(kuò)展可供選擇。流行的圖標(biāo)擴(kuò)展有：

• vscode-icons

• Material Icon Theme

• Material Theme Icons

• Simple icons

Prettier

Prettier是一款有傾向的代碼格式化程序。它在GitHub上獲得了38500多個(gè)標(biāo)星，是最流行的代碼格式化器之一。一致的代碼格式和風(fēng)格可以節(jié)省不少時(shí)間，特別是在與其他開(kāi)發(fā)人員協(xié)作的時(shí)候。

考慮下述代碼：

這段代碼有許多格式問(wèn)題，例如：

• 單引號(hào)和雙引號(hào)混用

• 不規(guī)則的分號(hào)用法

• 第6行的console語(yǔ)句縮進(jìn)不恰當(dāng)

下圖演示了如何使用Prettier來(lái)格式化并修復(fù)以上錯(cuò)誤：

該擴(kuò)展支持Prettier插件，這樣你就可以使用本地定制過(guò)的Perttier。

你還可以進(jìn)一步配置該擴(kuò)展，甚至可以配置成保存時(shí)自動(dòng)執(zhí)行。

Import Cost

Importcost可以在代碼中顯示導(dǎo)入的估計(jì)大小。編寫(xiě)項(xiàng)目時(shí)，很重要的一點(diǎn)就是不要導(dǎo)入過(guò)大的軟件包，以免損害用戶體驗(yàn)。避免導(dǎo)入過(guò)大軟件包的方法之一就是隨時(shí)跟蹤軟件包的大小。

如果導(dǎo)入過(guò)大，Import Cost就會(huì)用紅色顯示大小，以示警告。你可以自行配置小、中、大分別對(duì)應(yīng)的大小。

Profile Switcher

ProfileSwitcher可以在多個(gè)用戶配置中切換。

該擴(kuò)展特別適合內(nèi)容創(chuàng)作者，如技術(shù)博客作者、YouTube主播等。你不需要每次共享VSCode屏幕時(shí)更改設(shè)置，只需要?jiǎng)?chuàng)建新的用戶配置即可。

下圖演示了怎樣在兩個(gè)用戶配置Default和Content Creation之間切換：

GitLens

GitLens是一款開(kāi)源擴(kuò)展。它給VSCode添加了Git的功能。

該擴(kuò)展最好的一點(diǎn)就是能通過(guò)Git blame和code lens的功能，將代碼的作者可視化。

下面是更詳細(xì)的代碼作者的信息：

這只是GitLens的諸多功能之一。其他值得一提的功能有：

• 遍歷某個(gè)文件的歷史版本

• 在行尾顯示當(dāng)前行的作者信息，而不會(huì)對(duì)工作造成干擾

• 自定義狀態(tài)欄，顯示當(dāng)前行的上次修改者和修改日期

總結(jié)

本文介紹了10款VSCode擴(kuò)展，幫助你成為更好的開(kāi)發(fā)者并提高生產(chǎn)力。

還有許多其他的VSCode擴(kuò)展，比如：

• Live Server

• Path Intellisense

• Code Spell Checker

• Better Align

• Quokka.js

• indent-rainbow

原文鏈接：

https://blog.logrocket.com/top-10-vs-code-extensions-2021/