姓名:宮松濤
學(xué)號(hào):19021210927
嵌牛導(dǎo)讀:就像大多數(shù) IDE 一樣渊季,VSCode 也有一個(gè)擴(kuò)展和主題市場更耻,包含了數(shù)以千計(jì)質(zhì)量不同的插件测垛。為了幫助大家挑選出值得下載的插件,我們針對(duì)性的收集了一些實(shí)用秧均、有趣的插件與大家分享食侮。
嵌牛鼻子:VSCode 插件
嵌牛提問:怎樣選擇有用的VSCode 插件
轉(zhuǎn)載源:精選号涯!15 個(gè)必備的 VSCode 插件- 簡書
嵌牛正文:
Visual Studio Code 是由微軟開發(fā)的一款免費(fèi)、跨平臺(tái)的文本編輯器锯七。由于其卓越的性能和豐富的功能链快,它很快就受到了大家的喜愛。
就像大多數(shù) IDE 一樣眉尸,VSCode 也有一個(gè)擴(kuò)展和主題市場域蜗,包含了數(shù)以千計(jì)質(zhì)量不同的插件。為了幫助大家挑選出值得下載的插件噪猾,我們針對(duì)性的收集了一些實(shí)用霉祸、有趣的插件與大家分享。
--
由于 VSCode 沒有提供直接在瀏覽器中打開文件的內(nèi)置界面袱蜡,所以此插件在快捷菜單中添加了在默認(rèn)瀏覽器查看文件選項(xiàng)丝蹭,以及在客戶端(Firefox,Chrome戒劫,IE)中打開命令面板選項(xiàng)半夷。
插件地址:【傳送門】
--
Quokka 是一個(gè)調(diào)試工具插件,能夠根據(jù)你正在編寫的代碼提供實(shí)時(shí)反饋迅细。它易于配置巫橄,并能夠預(yù)覽變量的函數(shù)和計(jì)算值結(jié)果。另外茵典,在使用 JSX 或 TypeScript 項(xiàng)目中湘换,它能夠開箱即用。
插件地址:【傳送門】
--
使用流行的 JavaScript 庫 – Faker统阿,能夠幫你快速的插入用例數(shù)據(jù)彩倚。Faker 可以隨機(jī)生成姓名、地址扶平、圖像帆离、電話號(hào)碼,或者經(jīng)典的亂數(shù)假文段落结澄,并且每個(gè)類別還包含了各種子類別哥谷,你可以根據(jù)自身的需求來使用這些數(shù)據(jù)。
插件地址:【傳送門】
--
使用此插件麻献,你可以追蹤至樣式表中 CSS 類和 ids 定義的地方们妥。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí),選擇“ Go to Definition 和 Peek definition ”選項(xiàng)勉吻,它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼监婶。
插件地址:【傳送門】
--
通過使用 HTML 模版插件,你就擺脫了為 HTML 新文件重新編寫頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html惑惶,并按 Tab 鍵煮盼,即可生成干凈的文檔結(jié)構(gòu)。
插件地址:【傳送門】
--
Prettier 是目前 Web 開發(fā)中最受歡迎的代碼格式化程序带污。安裝了這個(gè)插件孕似,它就能夠自動(dòng)應(yīng)用 Prettier,并將整個(gè) JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式刮刑。如果你還想使用 ESLint,那么還有個(gè) Prettier – Eslint 插件养渴,你可不要錯(cuò)過咯雷绢!
插件地址:【傳送門】
--
這個(gè)便捷的插件,將為你提供你在 CSS 中使用顏色的相關(guān)信息理卑。你只需在顏色上懸停光標(biāo)翘紊,就可以預(yù)覽色塊中色彩模型的(HEX、 RGB藐唠、HSL 和 CMYK)相關(guān)信息了帆疟。
插件地址:【傳送門】
--
此插件在 Visual Studio 代碼中添加了許多實(shí)用的 SVG 程序,你無需離開編輯器宇立,便可以打開 SVG 文件并查看它們踪宠。同時(shí),它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項(xiàng)妈嘹。
插件地址:【傳送門】
--
這個(gè)插件能夠在你的代碼中標(biāo)記出所有的 TODO 注釋柳琢,以便更容易追蹤任何未完成的業(yè)務(wù)。在默認(rèn)的情況下润脸,它會(huì)查找 TODO 和 FIXME 關(guān)鍵字柬脸。當(dāng)然,你也可以添加自定義表達(dá)式毙驯。
插件地址:【傳送門】
--
這是一個(gè)能夠在項(xiàng)目中添加圖標(biāo)字體的插件倒堕。該插件支持超過 20 個(gè)熱門的圖標(biāo)集,包括了 Font Awesome爆价、Ionicons垦巴、Glyphicons 和 Material Design Icons。
插件地址:【傳送門】
--
這是一款用于壓縮合并 JavaScript 和 CSS 文件的應(yīng)用程序允坚。它提供了大量自定義的設(shè)置魂那,以及自動(dòng)壓縮保存并導(dǎo)出為.min文件的選項(xiàng)。它能夠分別通過 uglify-js稠项、clean-css 和 html-minifier涯雅,與 JavaScript、CSS 和 HTML 協(xié)同工作展运。
插件地址:【傳送門】
--
雖然 VSCode 內(nèi)置了開箱即用的文本轉(zhuǎn)換選項(xiàng)活逆,但其只能進(jìn)行文本大小寫的轉(zhuǎn)換露该。而此插件則添加了用于修改文本的更多命名格式,包括駝峰命名败许、下劃線分隔命名柑潦,snake_case 命名以及 CONST_CAS 命名等。
插件地址:【傳送門】
--
這是一個(gè)用于實(shí)時(shí)測試正則表達(dá)式的實(shí)用工具锈遥。它可以將正則表達(dá)式模式應(yīng)用在任何打開的文件上纫事,并高亮所有的匹配項(xiàng)。
插件地址:【傳送門】
--
VSCode 默認(rèn)支持大量的主流編程語言所灸,但如果你所使用的編程語言不包括在內(nèi)丽惶,也可以通過下載擴(kuò)展包來自動(dòng)添加。同時(shí)爬立,你還可以添加一些像 React Native 與 Vue 的相關(guān) Web 開發(fā)插件包钾唬。
插件地址:【傳送門】
--
當(dāng)然,在眾多的實(shí)用插件中侠驯,豈能少了漂亮的主題呢抡秆?你每天都會(huì)與你的 VSCode 編輯器進(jìn)行“親密的接觸”,為何不把它打扮得更漂亮些呢吟策?這里有一些幫助你更改側(cè)邊欄的配色方案儒士,以及圖標(biāo)的相關(guān)主題,與大家分享:
感謝你的閱讀檩坚。若你有所收獲乍桂,歡迎點(diǎn)贊與分享。
注:
本文版權(quán)歸原作者所有效床,僅用于學(xué)習(xí)與交流睹酌;
如需轉(zhuǎn)載譯文,煩請(qǐng)按下方注明出處信息剩檀,謝謝憋沿!
英文原文:15 Essential Plugins for Visual Studio Code
作者:Danny Markov