作者 | Ashutosh Singh
譯者 | 彎月
出品 | CSDN(ID:CSDNnews)
VisualStudio Code是開(kāi)發(fā)者社區(qū)最流行的一款編輯器。理由之一就是VSCode有許多擴(kuò)展,可以提高開(kāi)發(fā)的效率。
在本文中,我們將介紹每一位開(kāi)發(fā)人員都應(yīng)該了解的10款VSCode擴(kuò)展。
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)簽和元素嵌套在一起,手工更新非常困難且麻煩。
這款擴(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ù)式組件。
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)
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í)行。
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)的大小。
ProfileSwitcher可以在多個(gè)用戶配置中切換。
該擴(kuò)展特別適合內(nèi)容創(chuàng)作者,如技術(shù)博客作者、YouTube主播等。你不需要每次共享VSCode屏幕時(shí)更改設(shè)置,只需要?jiǎng)?chuàng)建新的用戶配置即可。
下圖演示了怎樣在兩個(gè)用戶配置Default和Content Creation之間切換:
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)前行的上次修改者和修改日期
本文介紹了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/
咨詢熱線:
86-592-5151555
地址: 廈門(mén)市集美區(qū)軟件園三期A3棟504室
QQ:1039899831
固話:86-592-5151555
手機(jī):18020730588(賴先生)
官網(wǎng):m.haymarketdoctors.com
Copyright © 2000-2021 m.haymarketdoctors.com
游戲作品版權(quán)歸原作者享有,如無(wú)意之中侵犯了您的版權(quán),請(qǐng)您按照《版權(quán)保護(hù)投訴指引》來(lái)信告知,本網(wǎng)站將應(yīng)您的要求刪除。