每個(gè)前端開(kāi)發(fā)人員都應(yīng)該使用的 10 個(gè) VS Code 擴(kuò)展

我們的家是我們花費(fèi)大量時(shí)間的地方。文本編輯器我們都有那些讓事情難以完成的令人沮喪的時(shí)刻。有時(shí)需要花費(fèi)太多時(shí)間才能找到正確的文件，而有時(shí)找到匹配的括號(hào)本身就是一項(xiàng)乏味的冒險(xiǎn)。讓我們擺脫所有這些煩人的事情。這篇文章將討論前端開(kāi)發(fā)中有用的 VS Code 擴(kuò)展， 從生產(chǎn)力促進(jìn)器到高級(jí)調(diào)試輔助，

1.Live server

在編輯器中保存更改然后刷新瀏覽器以查看更改可能很煩人。實(shí)時(shí)服務(wù)器強(qiáng)制自動(dòng)重新加載，你的更改將在你保存工作后立即呈現(xiàn)。Visual Studio Code 創(chuàng)建一個(gè)本地服務(wù)器來(lái)托管動(dòng)態(tài)和靜態(tài)站點(diǎn)。

2. Mithril Emmet

Emmet 是 HTML 開(kāi)發(fā)人員的工具包，可以顯著改善你的 HTML 和 CSS 工作流程。Emmet 使我們能夠比我們必須編寫(xiě)的更快、更有效地創(chuàng)建 HTML 代碼。這將大大提高你的開(kāi)發(fā)速度。

3. ESLint

它將 ESLint 與 VS Code 集成在一起。如果你不熟悉 ESLint，請(qǐng)查看文檔。這使你能夠遵守縮進(jìn)、定位等的標(biāo)準(zhǔn)做法。

4. Prettier

格式化代碼需要很多時(shí)間。Prettier 自動(dòng)執(zhí)行此任務(wù)，刪除任何原始樣式，并創(chuàng)建一致的樣式，使其更易于閱讀。每次保存更改時(shí)，它都會(huì)自動(dòng)清理您的代碼。

5. Bracket Pair Colorizer

它使用相同的顏色為你的右括號(hào)和左括號(hào)著色。在你的文件或函數(shù)的結(jié)尾處可能有不止一兩個(gè)右括號(hào)。找到正確的可能具有挑戰(zhàn)性。要找出支架打開(kāi)或關(guān)閉的位置，請(qǐng)使用支架對(duì)著色器。

6. CSS Peek

CSS Peek 允許你快速定位和檢查所選類(lèi)或 ID 的樣式。對(duì)于不喜歡在文件之間切換、分割屏幕或在 HTML 和 CSS 向后跳轉(zhuǎn)的開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)很棒的解決方案。

7. JavaScript ES6 code snippets

它使用 ES6 語(yǔ)法并提供代碼片段來(lái)幫助你編寫(xiě) JavaScript 代碼。片段非常有用，可以防止許多拼寫(xiě)錯(cuò)誤。它們還可以更容易地更快地編碼。Javascript 代碼片段可以加速 Javascript 編碼。它支持 TypeScript 文件和 JSX。

8. Simple React snippets

如前所述，代碼片段很有用并且可以加快編碼速度。此擴(kuò)展包含每天使用的各種 React 命令和代碼段。

9.ENV

這個(gè)擴(kuò)展很簡(jiǎn)單，并為 env 文件添加了語(yǔ)法高亮和格式支持。

10. Debugger for Chrome 

你可以使用 Debugger for Chrome 插件將 Google Chrome 瀏覽器調(diào)試器添加到您的編輯器中。你可以啟動(dòng)連接到你的應(yīng)用程序的 Chrome 實(shí)例或?qū)⑵涓郊拥浆F(xiàn)有的 Chrome 實(shí)例。它可以設(shè)置斷點(diǎn)、步進(jìn)和調(diào)試腳本。如果你不喜歡在代碼編輯器和瀏覽器調(diào)試控制臺(tái)中的文件之間切換，這是一個(gè)完美的插件。