簡(jiǎn)評(píng):你是否切換到 VSCode 并正在尋找一些有用的擴(kuò)展?以下是一些我最喜歡的 VSCode 擴(kuò)展十电。
Html Tag Wrap
這個(gè)擴(kuò)展可讓你選擇一個(gè)單詞赛糟、句子或多行文本淤刃,并用指定的 html 標(biāo)簽包起來(lái)(快捷鍵:Alt + W 或 Option + W)
React.js code snippets
如果你正在使用 React.js睁搭,你會(huì)發(fā)現(xiàn)這些片段非常有用赶诊。
rcc 將創(chuàng)建 React 類組件骨架,rsc 將創(chuàng)建 React 無(wú)狀態(tài)組件等等园骆。
Npm Intellisense and Path Intellisense
當(dāng)使用 React.js 時(shí)舔痪,經(jīng)常需要導(dǎo)入其他模塊,這兩個(gè)擴(kuò)展將通過自動(dòng)完成導(dǎo)入語(yǔ)句為你節(jié)省大量時(shí)間遇伞。
Npm Intellisense 自動(dòng)完成導(dǎo)入語(yǔ)句中的 npm 模塊辙喂,Path Intellisense 自動(dòng)補(bǔ)全文件名捶牢。
Git Blame
Git Blame 會(huì)在狀態(tài)欄中添加一個(gè) git blame 信息鸠珠。這有助于快速查看哪些人對(duì)工作文件進(jìn)行了最后一次更改,以及某行辣雞代碼到底是誰(shuí)寫的秋麸。
Git History
如果需要查看更詳細(xì)的提交歷史渐排,Git History 是你最好的朋友。
Bookmarks
這可能是此列表中最有用的擴(kuò)展之一灸蟆。它允許你在文件的任何位置創(chuàng)建書簽(ctrl+alt+k 或cmd+option+k)驯耻,然后通過 cmd+option+j 或 cmd+option+l 快速在書簽之間跳轉(zhuǎn)。
Sublime Text Keymap
如果你 Sublime Text 的老用戶炒考,此擴(kuò)展將使你喜歡的 Sublime Text 快捷方式在 VSCode 中可用可缚。
HTML Class Suggestions
這個(gè)擴(kuò)展將根據(jù)工作空間中的 CSS 文件為 HTML 類屬性添加代碼補(bǔ)全建議。
Open in Browser
我不清楚為什么這不是 VSCode 的內(nèi)置功能斋枢,但這個(gè)擴(kuò)展可以讓你在瀏覽器中打開你的 html 文件帘靡。
SVG Viewer
如果要在 VSCode 中直接預(yù)覽 SVG 圖像和圖標(biāo),請(qǐng)安裝此擴(kuò)展瓤帚。
Random
不是最常用的擴(kuò)展描姚,但是有時(shí)候能夠用它創(chuàng)建一個(gè)隨機(jī)數(shù)涩赢,地址或電話號(hào)碼。
BEM Expand
BEM Expand 允許在 HTMl 和 JSX 文件中擴(kuò)展 BEM 類轩勘。
Auto Close Tag
像 Visual Studio 或 Sublime Text 那樣筒扒,添加 html/xml 標(biāo)簽的結(jié)束標(biāo)簽。
Auto Rename Tag
此擴(kuò)展將自動(dòng)重命名開始和結(jié)束 html/xml 標(biāo)簽绊寻。
Alignment
就像 Sublime Text 3 的擴(kuò)展 Alignment Package 那樣花墩,此擴(kuò)展將對(duì)齊代碼。
原文:A Collection of Useful Extensions for VSCode - Petr Tichy - Front End Developer - Melbourne
擴(kuò)展閱讀:
StackBlitz - 針對(duì) Web 開發(fā)者的在線 IDE
使用 Annotation 改善 Android 代碼