簡(jiǎn)評(píng):你是否切換到 VSCode 并正在尋找一些有用的擴(kuò)展?以下是一些我最喜歡的 VSCode 擴(kuò)展。
Html Tag Wrap
這個(gè)擴(kuò)展可讓你選擇一個(gè)單詞、句子或多行文本,并用指定的 html 標(biāo)簽包起來(快捷鍵:Alt + W 或 Option + W)
React.js code snippets
如果你正在使用 React.js,你會(huì)發(fā)現(xiàn)這些片段非常有用。
rcc 將創(chuàng)建 React 類組件骨架,rsc 將創(chuàng)建 React 無狀態(tài)組件等等。
Npm Intellisense and Path Intellisense
當(dāng)使用 React.js 時(shí),經(jīng)常需要導(dǎo)入其他模塊,這兩個(gè)擴(kuò)展將通過自動(dòng)完成導(dǎo)入語句為你節(jié)省大量時(shí)間。
Npm Intellisense 自動(dòng)完成導(dǎo)入語句中的 npm 模塊,Path Intellisense 自動(dòng)補(bǔ)全文件名。
Git Blame
Git Blame 會(huì)在狀態(tài)欄中添加一個(gè) git blame 信息。這有助于快速查看哪些人對(duì)工作文件進(jìn)行了最后一次更改,以及某行辣雞代碼到底是誰寫的。
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 代碼