通過(guò)該擴(kuò)展可為文件列表選擇漂亮可愛的圖標(biāo)。如果文件是JavaScript，那么在文件名旁邊的material樣式中會(huì)有一個(gè)JavaScript圖標(biāo)。若是從事視覺(jué)開發(fā)，那么該擴(kuò)展就再適合不過(guò)了。

12.Javascript (ES6) Code Snippets

若你是JavaScript開發(fā)人員，Javascript (ES6) Code Snippets將是你最好的幫手。無(wú)論使用什么JavaScript框架，此擴(kuò)展都將有所幫助。如果只是一遍又一遍地輸入相同的通用代碼，效果倒不是很明顯。

該代碼片段十分方便，是一個(gè)輕量級(jí)的庫(kù)擴(kuò)展，它可以綁定任何標(biāo)準(zhǔn)的JavaScript調(diào)用，因此只需鍵入快捷代碼，即可看到整個(gè)通用代碼自動(dòng)輸入到編輯器中。該擴(kuò)展不僅支持Javascript ES6，還支持Typescript、Reactjs、Vue和HTML。

13.LiveServer

在使用Live Server時(shí)，該VSCode擴(kuò)展將有助于打開當(dāng)前項(xiàng)目的Live web服務(wù)器。一般這項(xiàng)工作用像Webpack這樣的構(gòu)建器完成即可，但是該擴(kuò)展顯然更為有效。只需右擊并打開運(yùn)行l(wèi)ive server，便會(huì)自動(dòng)完成剩余的工作。

14.Github 擴(kuò)展

若正在使用Github作為項(xiàng)目存儲(chǔ)庫(kù)，或者希望使用其他開發(fā)人員的源代碼存儲(chǔ)庫(kù)，那么這個(gè)擴(kuò)展就是為您量身定做。

順便一提，Github現(xiàn)在由微軟所有和管理，所以Github和VSCode現(xiàn)在都是微軟產(chǎn)品之一。

使用Github擴(kuò)展，可以輕松地連接其他開發(fā)人員的存儲(chǔ)庫(kù)、喜歡的開發(fā)人員的存儲(chǔ)庫(kù)，甚至自己的存儲(chǔ)庫(kù)。經(jīng)常使用Github的話，切換存儲(chǔ)庫(kù)將極為順手。

15.GitLens

Gitlens是另一個(gè)好用的擴(kuò)展。它擴(kuò)充了當(dāng)前的VSCode Git功能，能夠從以前所作的提交和更改中同時(shí)執(zhí)行代碼比較，還擁有其他一些很厲害的特性。

16.NPM

所有現(xiàn)代開發(fā)人員都知道NPM是什么，以及它為什么這么重要。Node包管理器是一個(gè)可管理Package .json文件的擴(kuò)展。如果需要的依賴項(xiàng)以及NPM包的版本控制尚未安裝，它會(huì)給出警告。

筆者所處理的大多數(shù)bug和錯(cuò)誤都來(lái)自于使用的NPM包、函數(shù)和特性，因?yàn)樗鼈兣c其他包不兼容，所以無(wú)法運(yùn)行。如果沒(méi)有它所要求的依賴項(xiàng)沒(méi)有兼容的版本那可真是鴨梨山大！

17.Beautify

Beautify是另一用于代碼格式化的良好擴(kuò)展，與前文提到的Prettier幾乎一樣，但是效果更漂亮。到目前為止，它已有將近1200萬(wàn)的下載量了，還用筆者再多說(shuō)什么嗎。它可以格式化用Javascript、JSON、Sass、CSS和HTML編寫的代碼。

18.Live Sass Compiler

如果您喜好Sass風(fēng)格，或者只是因?yàn)樗琼?xiàng)目應(yīng)用程序需求的一部分而恰好正在使用Sass，那么這個(gè)VSCode擴(kuò)展就是為您而生的!

它會(huì)實(shí)時(shí)將SASS/SCSS文件編譯成CSS文件，并自動(dòng)提供應(yīng)用程序或?yàn)g覽器中已編譯樣式的實(shí)時(shí)預(yù)覽。

19.Emmet

自筆者開始使用VSCode以來(lái)，就一直在使用Emmet。它可以幫助開發(fā)人員提高編寫代碼的速度。使用該擴(kuò)展不久之后就再也離不開它了。

20.VSCode Icons

這是為前端開發(fā)人員打造的VSCode擴(kuò)展。與前文提到的material圖標(biāo)很相似，但是設(shè)計(jì)不同。前端開發(fā)人員通常都喜歡可視化，對(duì)吧。這個(gè)圖標(biāo)有助于查看文件類型，不管它們是HTML,CSS, Javascript還是其他類型。

21.顏色選擇器

顏色選擇器擴(kuò)展有助于輕松選擇CSS文件中的顏色。它將立即反映或應(yīng)用到當(dāng)前正在處理的屬性。若喜歡使用RGBA顏色，也可以使用。

22.Quokka

Quokka被稱為JavaScript開發(fā)人員的現(xiàn)代便簽板。其構(gòu)建旨在幫助開發(fā)人員進(jìn)行代碼檢查。這是一個(gè)完美的解決方案。

與其他VSCode擴(kuò)展相比，它非常輕量級(jí)、高效且強(qiáng)大，有助于加快工作進(jìn)程。同時(shí)，它又是實(shí)時(shí)的，可以給出即時(shí)反饋。

它可以為每個(gè)結(jié)果匹配一個(gè)固定的顏色類型，以便開發(fā)人員更容易理解代碼。

23.Live Share

Live Share是VSCode文本編輯器中最先進(jìn)的特性之一。當(dāng)與團(tuán)隊(duì)成員一起工作時(shí)，它無(wú)可挑剔。LiveShare的功能之一是允許每個(gè)開發(fā)人員實(shí)時(shí)地與其他開發(fā)人員共享代碼片段。

這一點(diǎn)堪稱完美，且有助于實(shí)現(xiàn)更加高效和多產(chǎn)團(tuán)隊(duì)協(xié)作。LiveShare允許即時(shí)共享當(dāng)前的項(xiàng)目，即使在調(diào)試時(shí)也是如此。

協(xié)作者不需要安裝任何存儲(chǔ)庫(kù)、sdk或任何東西來(lái)連接其他開發(fā)人員的當(dāng)前代碼。團(tuán)隊(duì)中的每個(gè)人都可以通過(guò)協(xié)作來(lái)遠(yuǎn)程探索和修復(fù)問(wèn)題。

24.ES7, React, Redux & GraphQL Snippets

高級(jí)開發(fā)人員目前使用的多是JavaScript框架(如React)，以及其他與生產(chǎn)和復(fù)雜應(yīng)用程序兼容的技術(shù)，這項(xiàng)擴(kuò)展是為他們量身定做的。

反復(fù)輸入標(biāo)準(zhǔn)代碼效率低下。在該代碼片段的幫助下，可以輕松創(chuàng)建基于類的組件、功能組件、輸入項(xiàng)、生命周期方法等，只需鍵入快捷代碼，這是筆者使用最多的擴(kuò)展之一，因?yàn)楣P者一直使用的是Reactjs和React Native。

25.REST 客戶端

另一個(gè)高級(jí)工具是Rest客戶端擴(kuò)展，在使用其他第三方工具和APIs時(shí)，它將大有幫助。另外也有助于輕松發(fā)出HTTP請(qǐng)求。

通過(guò)此擴(kuò)展可輕松地在代碼編輯器中直接調(diào)用和結(jié)束，大大節(jié)省了時(shí)間——你可以使用這個(gè)方法，而不是只為實(shí)現(xiàn)一個(gè)請(qǐng)求而來(lái)回切換瀏覽器或郵箱。

以上就是25個(gè)提升開發(fā)幸福感的VSCode擴(kuò)展分享，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

vscode怎么設(shè)置鍵映射擴(kuò)展? vscode鍵映射的教程

vscode怎么新建一個(gè)窗口? vscode打開新窗口的技巧

VSCode怎么添加IntelliJ IDEA的快捷鍵? VSCode新增快捷鍵擴(kuò)展的技巧

最新評(píng)論