原文作者：?Ankur Biswas

翻譯：weakish@LeanCloud

我留意到，網(wǎng)上有不少關(guān)于 VS Code 的文章，然而這些文章提到的擴(kuò)展大部分都讓我失望。所以我決定編寫(xiě)我個(gè)人使用的插件列表。

前端為主的開(kāi)發(fā)者，想高效使用 Visual Studio Code，我覺(jué)得這個(gè)列表會(huì)很有幫助。其中一些插件你大概已經(jīng)裝了 - 因?yàn)樗鼈兪潜煌扑]最多的擴(kuò)展 - 但還有一些你也許沒(méi)裝。

方便閱讀

Beautify?- 放大標(biāo)記，調(diào)整間距，讓 HTML、CSS、JS 更易閱讀。

Better Comments?- 在代碼中創(chuàng)建對(duì)人類(lèi)更友好的注釋。我一直用這個(gè)擴(kuò)展。它是我們研發(fā)團(tuán)隊(duì)必備擴(kuò)展。

Bookmarks?- 助你瀏覽代碼，在重要位置之間方便快速地移動(dòng)。搭配 MetaGo 使用，寫(xiě)代碼的時(shí)候我基本不用鼠標(biāo)。

MetaGo?- 讓通過(guò)鍵盤(pán)移動(dòng)光標(biāo)和選取內(nèi)容快得不像話(huà)，徹底改變了我使用 VS Code 的方式。

Log File Highlighter?- 顧名思義，讓 VSCode 支持 .log 文件。讀日志文件再也不覺(jué)得費(fèi)眼了。

Guides?- 有了這個(gè)擴(kuò)展，再也不需要折疊、展開(kāi)那些該死的元素來(lái)搞清楚縮進(jìn)了。搭配之前提到的 Beautify 和下面的 Rainbow Brackets 使用，效果更佳。

Rainbow Brackets?- 高亮當(dāng)前括號(hào)對(duì)，其他括號(hào)使用不同配色，讓定位變得極為容易。重度 JS 開(kāi)發(fā)者的最?lèi)?ài)。

Image Preview?- 在 gutter 和光標(biāo)懸浮時(shí)顯示圖片預(yù)覽。檢查是否引用了正確的圖片/圖標(biāo)的關(guān)鍵所在。

GitLens?- 無(wú)疑是最常用的擴(kuò)展之一；VS Code 不可或缺的擴(kuò)展，讓 Git 體驗(yàn)好上太多。搭配?.gitignore?和?.diff?插件可以補(bǔ)足功能。

快速編寫(xiě)

CSS Peek?- 借鑒了 Bracket 的 CSS Inline Editors。VS Code 現(xiàn)在有了我最?lèi)?ài)的 Brackets 特性之一。

stylelint?- 既然我們 lint JS 代碼，為什么不同時(shí) lint LESS/SASS/CSS 代碼呢？這個(gè)擴(kuò)展有助于快速清理寫(xiě)得比較隨意的 CSS。

Live Server?- 最佳本地開(kāi)發(fā)服務(wù)器，支持實(shí)時(shí)重載靜態(tài)和動(dòng)態(tài)頁(yè)面(甚至支持 PHP！)

Version Lens?- 將 package.json 中指定的依賴(lài)和開(kāi)發(fā)依賴(lài)更新到最新版本。由?Mihail?推薦。

DotENV?- 為 .env 文件增加高亮支持，有時(shí)候我需要推送代碼到 Heroku、Netlify……

美觀抓屏

Polacode?- 高亮代碼并抓屏，展示下你的代碼配色方案。想在教程或文檔中提供代碼示例時(shí)很有用。

多個(gè)實(shí)例

Settings Sync?- 使用私密 gist 保存配置文件，在多個(gè) VS Code 實(shí)例間同步設(shè)置、代碼片段、主題、文件圖標(biāo)、任務(wù)、鍵綁定、工作區(qū)、擴(kuò)展。這個(gè)擴(kuò)展讓我只需使用兩個(gè)簡(jiǎn)單命令，便可同步筆記本、工作臺(tái)式機(jī)、家用臺(tái)式機(jī)的 VS Code。

EditorConfig?- 使用 .editorconfig 文件中的配置覆蓋用戶(hù)/工作區(qū)配置，讓開(kāi)發(fā)團(tuán)隊(duì)在同一個(gè)項(xiàng)目?jī)?nèi)統(tǒng)一特定配置。

雖然我還裝了很多其他插件，不過(guò)它們主要針對(duì)我使用的環(huán)境(前端 web + Azure 云)，所以就這樣吧。我希望，在你日常使用 VS Code 的過(guò)程中，這些擴(kuò)展能有幫助。

值得一提

根據(jù)讀者留言反饋，我新增了一些值得列入的擴(kuò)展：

Import Cost?- 顯示 import 語(yǔ)句的文件尺寸開(kāi)銷(xiāo)。由?miku86?推薦。

Window Colors?- 運(yùn)行多個(gè) VS Code 實(shí)例？每個(gè)窗口使用一種顏色，免得忘了哪個(gè)項(xiàng)目在哪個(gè)窗口里。由?Jefry Pozo?推薦。

Prettier?- 美化代碼，使其更為清晰。Stackoverflow 使用 Prettier 顯示代碼片段。不過(guò)，它無(wú)法處理?.js/.ejs/.jade/.pug模板中的 HTML，所以在很多靜態(tài)站點(diǎn)生成器下效果不佳。

你早就裝了這些擴(kuò)展？你是否喜歡或者討厭這些擴(kuò)展？有其他我沒(méi)提到的值得一試的插件？歡迎留言！

end

LeanCloud，領(lǐng)先的 BaaS 提供商，為移動(dòng)開(kāi)發(fā)提供強(qiáng)有力的后端支持。更多內(nèi)容請(qǐng)關(guān)注「 LeanCloud 通訊」

總結(jié)

以上是生活随笔為你收集整理的vscode 显示多个文件_优秀的 VS Code 前端开发扩展的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。