圖源：Unsplash 在2017年，VSCode有260萬月活躍用戶（這是我找到的最新官方數(shù)據(jù)，現(xiàn)在肯定更多），可以說是目前最好的代碼編輯器。 它最大的一個(gè)特點(diǎn)是，插件多可自定義。 MarketPlace（插件商店）提供了大量擴(kuò)展插件，開發(fā)人員完全可以根據(jù)需求進(jìn)行自定義設(shè)置，這也有助于編寫高質(zhì)量的代碼。 本文將為編寫HTML，CSS，JavaScript以及使用VueJS或ReactJS等框架的前端工程師推薦10個(gè)VS Code擴(kuò)展插件。 1. CSS Peek CSSPeak通過識(shí)別和枚舉已應(yīng)用的不同樣式以幫助開發(fā)者處理標(biāo)記語言的類字符串和ID。這很方便，因?yàn)殚_發(fā)者不再需要在HTML和CSS文件之間頻繁跳轉(zhuǎn)。 2. ESLint 我難以評(píng)價(jià)該插件，因?yàn)樗泻芏嘧冯S者，但也有很多開發(fā)者不喜歡它。而毋庸置疑的是，該插件有助于編寫簡(jiǎn)潔代碼，如果你是JavaScript開發(fā)者，那這個(gè)下載量達(dá)2400萬次的擴(kuò)展插件是最好的選擇。 3. NPM 所有開發(fā)者應(yīng)該都認(rèn)識(shí)NPM，其全稱是Node Package Manager（node包管理器）。該擴(kuò)展插件有助于管理Package.json，當(dāng)生產(chǎn)環(huán)境依賴包未安裝時(shí)會(huì)發(fā)出警告，并確保安裝的版本正確。 4. Live Sass Compiler LiveSass Compiler雖然很小，但功能極其強(qiáng)大，它可以將SASS /SCSS文件實(shí)時(shí)編譯為CSS文件，并在瀏覽器中展示已編譯樣式的實(shí)時(shí)預(yù)覽。 5. Debugger for Chrome 對(duì)許多開發(fā)者而言，Chrome是開發(fā)、測(cè)試和調(diào)試代碼的首選瀏覽器。通過這個(gè)VS Code的官方擴(kuò)展插件，開發(fā)者可以直接在VS Code中進(jìn)行以上操作——沒什么能比這更棒了！ 6. JavaScript Code Snippets 此擴(kuò)展插件的創(chuàng)建者是Charalampos Karypidis，下載量達(dá)450萬次。它提供用于編寫JavaScript，Typescript，React，Vue，HHTML等的代碼片段，以及ES6語法支持。 7. Prettier 該插件十分簡(jiǎn)潔，編寫者為Esben Petersen，下載量近1400萬次。它幫助開發(fā)者格式化代碼，并提供顏色關(guān)鍵字以使代碼更具可讀性。 8. Beautify 它同Prettier十分類似，是一種出色的代碼格式化擴(kuò)展插件，近1200萬的下載量足以說明一切。可以用它格式化以JavaScript，JSON，CSS，Sass和HTML編寫的代碼。 9. Vetur Vetur是官方的VueJS擴(kuò)展插件，下載量逾2000萬次。其功能包括：錯(cuò)誤檢查、自動(dòng)補(bǔ)全及提供Vue代碼片段。如果你也是一名Vue開發(fā)者，就能切身體會(huì)到這個(gè)插件的優(yōu)秀之處！ 10. Live Server
LiveServer和LiveSass Compiler的創(chuàng)建者是同一個(gè)人——RitwickDey。在VS Code中，LiveServer能開啟一個(gè)本地開發(fā)服務(wù)器，為靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁提供服務(wù)。使用編輯器中的go-live按鈕，開發(fā)者可以立即把代碼放到服務(wù)器上，該擴(kuò)展插件還支持實(shí)時(shí)刷新頁面——真是太棒了！ 結(jié)論
本文推薦的擴(kuò)展插件并不完整，也不一定是最好的，但我希望它能為開發(fā)者提供一些好的工具來編寫高質(zhì)量的代碼，讓網(wǎng)頁開發(fā)者如虎添翼。 如果大家發(fā)現(xiàn)了一些有用的工具，或其他你認(rèn)為是頂級(jí)的擴(kuò)展插件，記得在評(píng)論區(qū)里和大家一起分享哦。
|
|
|
