本篇文章分享22個(gè)用于Web開(kāi)發(fā)的最佳VSCode插件孽亲。有一定的參考價(jià)值裳仆,有需要的朋友可以參考一下竣蹦,希望對(duì)大家有所幫助。
22個(gè)Visual Studio Code插件分享
1. Debugger for chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
相信我屿讽,調(diào)試JavaScript不僅僅是寫(xiě) console.log() (雖然這種方式應(yīng)用最多)屿储。Chrome內(nèi)置了一些功能贿讹,可以擁有更好的調(diào)試體驗(yàn)。這個(gè)插件能讓你在vs code里使用所有(或者幾乎所有)這些調(diào)試功能够掠。
如果你想了解更多民褂,你可以閱讀:
Debugging JavaScript in Chrome and Visual Studio Code.
地址:https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
2. Javascript (ES6) Code Snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
我喜歡Snippets插件。我覺(jué)得沒(méi)有必要反復(fù)輸入同一段代碼疯潭。這個(gè)插件為你提供了流行的(ES6)JavaScript代碼片段赊堪。
注…如果你沒(méi)有用es6javascript特性——趕緊用起來(lái)吧!
3. ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
是否想編寫(xiě)更好的代碼竖哩? 是否需要整個(gè)團(tuán)隊(duì)使用一致的格式哭廉? 安裝ESLint。 這個(gè)插件可以配置為自動(dòng)設(shè)置代碼格式以及帶有錯(cuò)誤或警告的“yell(提示)”相叁。 VS Code通過(guò)合適的配置遵绰,可以向你展示這些提示辽幌。
推薦學(xué)習(xí):《vscode教程》
4. Live server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
在代碼編輯器中進(jìn)行更改,切換到瀏覽器椿访,然后刷新以查看更改乌企。 那是開(kāi)發(fā)人員無(wú)休止的循環(huán),但是如果你在進(jìn)行更改時(shí)瀏覽器會(huì)自動(dòng)刷新會(huì)怎樣呢成玫? 這就是Live Server的用武之地加酵!
它還在本地服務(wù)器上運(yùn)行你的應(yīng)用程序。 有些事情只有在服務(wù)器里運(yùn)行應(yīng)用程序時(shí)才能測(cè)試哭当,因此這也是個(gè)利好之處猪腕。
5. Bracket Pair Colorizor
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
括號(hào)阻止開(kāi)發(fā)人員活著的禍害。 使用大量嵌套代碼荣病,幾乎不可能確定哪些括號(hào)彼此匹配码撰。 Bracket Pair Colorizor(如你所料)為括號(hào)匹配顏色,以使代碼更具可讀性个盆。 相信我,你想要朵栖!
6. Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
是否需要重命名HTML中的元素颊亮? 好了,使用“Auto Rename Tag”陨溅,你只需要重命名開(kāi)始或結(jié)束標(biāo)簽终惑,其他標(biāo)簽將自動(dòng)重命名。 簡(jiǎn)單但有效门扇!
7. Quokka
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
需要一個(gè)快速的地方來(lái)測(cè)試一些JavaScript嗎雹有? 我曾經(jīng)習(xí)慣在Chrome中打開(kāi)控制臺(tái),然后在其中輸入一些代碼臼寄,但缺點(diǎn)很多霸奕。 Quokka在VS Code中為你提供了一個(gè)JavaScript(和TypeScript)暫存器。 這意味著你可以在自己喜歡的編輯器中測(cè)試一段代碼吉拳!
8. Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
在大型項(xiàng)目中质帅,記住特定的文件名和文件所在的目錄可能會(huì)很麻煩。 此插件將為你提供智能提示留攒。 當(dāng)你開(kāi)始在引號(hào)中輸入路徑時(shí)煤惩,你將看到目錄和文件名的智能提示。 這樣可以避免你在文件瀏覽中花費(fèi)大量時(shí)間:)
9. Project Manager
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
我討厭的一件事是在VS Code中的項(xiàng)目之間切換炼邀。 每次我必須打開(kāi)文件資源管理器并在計(jì)算機(jī)上找到項(xiàng)目時(shí)魄揉。 但這隨Project Manager 的應(yīng)用而改變。 使用此插件拭宁,你可以在項(xiàng)目的側(cè)邊菜單中打開(kāi)一個(gè)額外的菜單洛退。 你可以在項(xiàng)目之間快速切換票彪,保存收藏夾或從文件系統(tǒng)自動(dòng)檢測(cè)Git項(xiàng)目。
如果你開(kāi)發(fā)多個(gè)不同的項(xiàng)目不狮,那么這是保持組織狀態(tài)和提高效率的好方法降铸。
10. Editor Config
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Editor Config是少數(shù)幾種編碼樣式的標(biāo)準(zhǔn),在主要文本編輯器/ IDE中都得到支持摇零。 運(yùn)行方式如下如下推掸。 你將配置文件保存在你的編輯器支持的存儲(chǔ)庫(kù)中。 在這種情況下驻仅,你必須為VS Code添加擴(kuò)展名谅畅,以使其遵守這些配置文件。 設(shè)置起來(lái)超級(jí)容易噪服,非常適合團(tuán)隊(duì)項(xiàng)目译仗。
11. Sublime Text Keymap
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
你是Sublime的狂熱用戶,不愿意切換到VS Code嗎抑片? 通過(guò)更改所有快捷方式以匹配Sublime的快捷方式照宝,此擴(kuò)展程序?qū)⑹鼓闱袚Q得沒(méi)有任何感知。 現(xiàn)在雹顺,你有什么理由不進(jìn)行切換丹墨?
12. Browser Preview
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
我喜歡 Live Server extension 擴(kuò)展(上文提到的),但就便利性而言嬉愧,這個(gè)擴(kuò)展更進(jìn)一步贩挣。它為您提供了VS Code內(nèi)部的實(shí)時(shí)重新加載預(yù)覽。 無(wú)需再查看瀏覽器即可看到很小的變化没酣!
13. Git Lens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
git插件一大堆王财,但是其中一個(gè)功能最強(qiáng)大,最多裕便。 您會(huì)得到有關(guān)警告的信息绒净,行和文件的歷史記錄,提交搜索等等闪金。 如果你需要有關(guān)Git工作流程的幫助疯溺,請(qǐng)從這個(gè)插件開(kāi)始!
14. Polacode
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
你知道你在博客和推特中看到的那些漂亮的代碼截圖嗎哎垦? 好吧囱嫩,很可能它們來(lái)自Polacode。 使用起來(lái)超級(jí)簡(jiǎn)單漏设。 將一段代碼復(fù)制到剪貼板墨闲,打開(kāi)擴(kuò)展名,粘貼代碼郑口,然后單擊保存圖像鸳碧!
15. Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
不要花時(shí)間格式化代碼...它做了盾鳞。 前面瞻离,我提到了ESLint腾仅,它提供格式化和檢查。 如果你不需要棉絨檢查套利,那么選擇Prettier推励。 它非常容易設(shè)置,可以配置為在保存時(shí)自動(dòng)格式化代碼肉迫。
16. Better Comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
此插件對(duì)各種類(lèi)型的注釋進(jìn)行不同顏色標(biāo)記验辞,以賦予它們不同的含義,并在其余代碼中突出喊衫。 我一直在用這個(gè)來(lái)做提示跌造。 很難忽略一個(gè)橙色的大提示,告訴我我有一些未完成的工作要做族购。
還有用于問(wèn)題壳贪,警報(bào)和強(qiáng)調(diào)的顏色代碼。 你也可以添加自己定義的联四!
17. Git Link
https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink
如果你想在Github中查看正在處理的文件撑碴,則這個(gè)插件適合你。 安裝后朝墩,只需右鍵單擊文件,你將看到在Github中打開(kāi)文件的選項(xiàng)伟姐。 如果你不使用Git Lens插件的話收苏,這個(gè)插件對(duì)于檢查歷史記錄,分支版本等非常好用愤兵。
18. VS Code Icons
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
你知道可以自定義VS Code中的圖標(biāo)嗎鹿霸? 如果你查看設(shè)置,將會(huì)看到“文件圖標(biāo)主題”的選項(xiàng)秆乳。 從那里懦鼠,你可以從預(yù)安裝的圖標(biāo)中選擇或安裝圖標(biāo)包。 這個(gè)插件為你提供了一個(gè)非骋傺撸可愛(ài)的圖標(biāo)包肛冶,已有1100萬(wàn)人使用!
19. Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
你是Google Material 設(shè)計(jì)的粉絲嗎扯键? 那么睦袖,檢出這個(gè)“ Material主題”圖標(biāo)包。 有數(shù)百種不同的圖標(biāo)荣刑,它們看起來(lái)很棒馅笙!
20. Settings Sync
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
開(kāi)發(fā)人員(包括我自己)花費(fèi)大量時(shí)間自定義開(kāi)發(fā)環(huán)境伦乔,尤其是文本編輯器。 使用“Settings Sync”插件董习,你可以在Github中保存設(shè)置烈和。 然后,可以使用一個(gè)命令將它們加載到任何新版本的VS Code皿淋。
21. Better Align
https://marketplace.visualstudio.com/items?itemName=wwm.better-align
如果你是那種喜歡代碼中完美對(duì)齊的人招刹,那么你需要Better Align。 你可以對(duì)齊多個(gè)變量聲明沥匈,尾隨注釋?zhuān)a段等蔗喂。沒(méi)有比安裝并嘗試一下更好的辦法來(lái)了解這個(gè)插件的過(guò)人之處了!
22. VIM
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
你是VIM深度用戶嗎高帖? 如果是的話缰儿,恭喜,你所掌握所有VIM騷操作散址,可以直接在VS Code中使用它乖阵。 我個(gè)人并不善于此道,但是我知道使用VIM發(fā)揮其潛力時(shí)會(huì)產(chǎn)生多么瘋狂的生產(chǎn)力预麸,從而為你提供更多的功能瞪浸。
原文作者:James Quick
原文地址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
更多編程相關(guān)知識(shí),請(qǐng)?jiān)L問(wèn):編程教學(xué)@艋觥对蒲!