我們的家是我們花費(fèi)大量時間的地方。文本編輯器我們都有那些讓事情難以完成的令人沮喪的時刻。有時需要花費(fèi)太多時間才能找到正確的文件，而有時找到匹配的括號本身就是一項(xiàng)乏味的冒險(xiǎn)。讓我們擺脫所有這些煩人的事情。這篇文章將討論前端開發(fā)中有用的 VS Code 擴(kuò)展， 從生產(chǎn)力促進(jìn)器到高級調(diào)試輔助，
1.Live server
在編輯器中保存更改然后刷新瀏覽器以查看更改可能很煩人。實(shí)時服務(wù)器強(qiáng)制自動重新加載，你的更改將在你保存工作后立即呈現(xiàn)。Visual Studio Code 創(chuàng)建一個本地服務(wù)器來托管動態(tài)和靜態(tài)站點(diǎn)。
2. Mithril Emmet
Emmet 是 HTML 開發(fā)人員的工具包，可以顯著改善你的 HTML 和 CSS 工作流程。Emmet 使我們能夠比我們必須編寫的更快、更有效地創(chuàng)建 HTML 代碼。這將大大提高你的開發(fā)速度。
3. ESLint
它將 ESLint 與 VS Code 集成在一起。如果你不熟悉 ESLint，請查看文檔。這使你能夠遵守縮進(jìn)、定位等的標(biāo)準(zhǔn)做法。
4. Prettier
格式化代碼需要很多時間。Prettier 自動執(zhí)行此任務(wù)，刪除任何原始樣式，并創(chuàng)建一致的樣式，使其更易于閱讀。每次保存更改時，它都會自動清理您的代碼。
5. Bracket Pair Colorizer
它使用相同的顏色為你的右括號和左括號著色。在你的文件或函數(shù)的結(jié)尾處可能有不止一兩個右括號。找到正確的可能具有挑戰(zhàn)性。要找出支架打開或關(guān)閉的位置，請使用支架對著色器。
6. CSS Peek
CSS Peek 允許你快速定位和檢查所選類或 ID 的樣式。對于不喜歡在文件之間切換、分割屏幕或在 HTML 和 CSS 向后跳轉(zhuǎn)的開發(fā)人員來說，這是一個很棒的解決方案。
7. JavaScript ES6 code snippets
它使用 ES6 語法并提供代碼片段來幫助你編寫 JavaScript 代碼。片段非常有用，可以防止許多拼寫錯誤。它們還可以更容易地更快地編碼。Javascript 代碼片段可以加速 Javascript 編碼。它支持 TypeScript 文件和 JSX。
8. Simple React snippets
如前所述，代碼片段很有用并且可以加快編碼速度。此擴(kuò)展包含每天使用的各種 React 命令和代碼段。
9.ENV
這個擴(kuò)展很簡單，并為 env 文件添加了語法高亮和格式支持。
10. Debugger for Chrome
你可以使用 Debugger for Chrome 插件將 Google Chrome 瀏覽器調(diào)試器添加到您的編輯器中。你可以啟動連接到你的應(yīng)用程序的 Chrome 實(shí)例或?qū)⑵涓郊拥浆F(xiàn)有的 Chrome 實(shí)例。它可以設(shè)置斷點(diǎn)、步進(jìn)和調(diào)試腳本。如果你不喜歡在代碼編輯器和瀏覽器調(diào)試控制臺中的文件之間切換，這是一個完美的插件。
