1. Live Server

Live Server 插件是一個(gè)用于前端開(kāi)發(fā)的擴(kuò)展，它的主要作用是提供一個(gè)本地開(kāi)發(fā)服務(wù)器，以便實(shí)時(shí)預(yù)覽和調(diào)試網(wǎng)頁(yè)應(yīng)用程序。其最大特點(diǎn)在于熱重載，即開(kāi)發(fā)者可實(shí)時(shí)預(yù)覽代碼效果。 因?yàn)?code>Live Server 允許開(kāi)發(fā)者在瀏覽器中實(shí)時(shí)預(yù)覽您正在編輯的網(wǎng)頁(yè)。每當(dāng)保存HTML、CSS、Javascript文件時(shí)，該插件會(huì)自動(dòng)刷新瀏覽器，以便開(kāi)發(fā)者可以立即看到頁(yè)面的更改效果。

2. TODO Highlights

TODO Highlights插件是一個(gè)用于幫助開(kāi)發(fā)人員識(shí)別和管理代碼中的待辦事項(xiàng)的工具。該插件的主要作用是提供代碼中注釋中包含的待辦事項(xiàng)的可視化標(biāo)記，以便開(kāi)發(fā)者更容易定位、跟蹤和處理這些任務(wù)。

當(dāng)使用todo或fixme標(biāo)簽后，可按下快捷鍵f1，然后選擇all 或者todo即可查看當(dāng)前項(xiàng)目中聲明的標(biāo)簽信息。

3. Markdown Preview Github Styling

Markdown Preview Github Styling 的作用是改善和優(yōu)化Markdown預(yù)覽功能，使得開(kāi)發(fā)者可以在VsCode 中實(shí)時(shí)預(yù)覽.md文件的最終效果。除此外，其還具有如下特點(diǎn)：

1. 預(yù)覽實(shí)時(shí)更新：插件允許您在 VSCode 中編寫(xiě)Markdown文檔，并實(shí)時(shí)預(yù)覽渲染效果。每當(dāng)您對(duì)文檔進(jìn)行更改并保存時(shí)，預(yù)覽面板會(huì)自動(dòng)更新，以便您可以立即查看您的編輯效果。

2. 提高可讀性：通過(guò)應(yīng)用 GitHub 風(fēng)格的樣式，該插件可以使 Markdown 文檔更易于閱讀，特別是對(duì)于那些已經(jīng)熟悉 GitHub 的用戶(hù)。這對(duì)于編寫(xiě)技術(shù)文檔、文檔說(shuō)明、README 文件等非常有幫助。

3. 可配置性：插件允許您根據(jù)需要進(jìn)行一些自定義配置，以適應(yīng)不同的渲染需求。您可以根據(jù)自己的偏好設(shè)置不同的預(yù)覽樣式。

總之，Markdown Preview Github Styling 插件通過(guò)在VSCode中提供GitHub 風(fēng)格的 Markdown 預(yù)覽，提高了Markdown編輯和協(xié)作的效率。

4. VsCode Icon

VSCode Icons 插件是Visual Studio Code中的一個(gè)擴(kuò)展，其主要作用是為文件和文件夾添加圖標(biāo)，以增強(qiáng)編輯器的可視化效果和可識(shí)別性。其可以為不同的文件或文件件添加不同的圖標(biāo)，進(jìn)而確保項(xiàng)目結(jié)構(gòu)清晰，項(xiàng)目結(jié)構(gòu)易于理解。具體效果如下：

5. Tabnine

Tabnine 是一款強(qiáng)大的智能代碼補(bǔ)全插件，可在 Visual Studio Code（VSCode）中使用。其主要作用是提供高效和智能的代碼建議，以加速代碼編寫(xiě)和提高代碼質(zhì)量。具體來(lái)看，Tabnine 主要有如下功能：

1. 智能代碼建議：Tabnine 使用機(jī)器學(xué)習(xí)和自然語(yǔ)言處理技術(shù)，分析您的代碼并為您提供高質(zhì)量的代碼建議。這不僅包括常見(jiàn)的變量、函數(shù)和類(lèi)名，還包括上下文感知的建議，可大大加速編碼過(guò)程。

2. 多語(yǔ)言支持：Tabnine支持多種編程語(yǔ)言，包括但不限于 Javascript、Python、Java、C++、Go 等。這使得它適用于不同類(lèi)型的項(xiàng)目和開(kāi)發(fā)任務(wù)。

3. 實(shí)時(shí)建議：插件在您鍵入代碼時(shí)實(shí)時(shí)提供建議，讓您不必在每次需要時(shí)手動(dòng)查找文檔或庫(kù)。這有助于減少拼寫(xiě)錯(cuò)誤和代碼語(yǔ)法問(wèn)題。

6. CodeSnap

CodeSnap 是Visual Studio Code（VSCode）中的一個(gè)插件，其允許開(kāi)發(fā)者選擇要捕捉的代碼段，并將其轉(zhuǎn)換為圖像格式。這樣， 開(kāi)發(fā)者可以將代碼示例分享給其他人，而不必以純文本或代碼文件的形式分享。

7. CSS Pee

CSS Peek 是 Vs Code中的一個(gè)插件，它的主要作用是幫助開(kāi)發(fā)人員更輕松地查找和導(dǎo)航CSS樣式表中的類(lèi)、ID、選擇器和樣式定義。

8. Javascript Code Snippets

Javascript Code Snippets代碼片段是一個(gè) VS Code 擴(kuò)展，它提供了使用 ES6 語(yǔ)法進(jìn)行 Javascript 開(kāi)發(fā)的代碼片段集合。

此擴(kuò)展包括循環(huán)、條件、函數(shù)等常見(jiàn) Javascript 概念的片段，以及箭頭函數(shù)、模板文字和解構(gòu)等 ES6 特定功能。使用這些片段可以為開(kāi)發(fā)人員節(jié)省大量時(shí)間，因?yàn)樗鼰o(wú)需手動(dòng)為日常任務(wù)鍵入代碼。

9. Prettier - Code formatter

Prettier 是 VSCode中常用的代碼格式化工具，Prettier 插件的主要作用在于 代碼自動(dòng)格式化。Prettier 插件可以自動(dòng)格式化您的代碼，包括 Javascript、Typescript、JSON、CSS、HTML 等多種編程語(yǔ)言。無(wú)需手動(dòng)調(diào)整縮進(jìn)、換行和其他格式設(shè)置，Prettier 會(huì)自動(dòng)為開(kāi)發(fā)者處理。

10.Git Graph

Git Graph 插件用于可視化查看存儲(chǔ)庫(kù)的 Git操作，并從圖形中輕松執(zhí)行Git操作。類(lèi)似于SOurceTree的可視化版本控制插件，可以更新、提交代碼，查看提交記錄，審視代碼。

11. Vue Language Features (Volar)

該插件可以讓Vue代碼獲得漂亮的語(yǔ)法高亮顯示、錯(cuò)誤檢查和代碼格式化。并且它還會(huì)對(duì)很多 Vue 指令和事件處理程序，進(jìn)行提示和建議。

12. Auto Close Tag

該插件幫助我們輸入標(biāo)簽的時(shí)候，自動(dòng)結(jié)束標(biāo)簽。通常想要使用一個(gè)特定的 HTML 元素時(shí)，需要手動(dòng)輸入開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。而當(dāng)使用該插件后，只需要輸入開(kāi)始標(biāo)簽，它就會(huì)自動(dòng)添加結(jié)束標(biāo)簽。此外，對(duì)于 Vue 開(kāi)發(fā)者來(lái)說(shuō)，它還支持自定義類(lèi)型名稱(chēng)。當(dāng)輸入自定義組件的開(kāi)始標(biāo)簽時(shí)，它會(huì)自動(dòng)添加結(jié)束標(biāo)簽。

13. Auto Rename Tag

該插件幫助我們?cè)谥孛粋€(gè)標(biāo)簽時(shí)，自動(dòng)重命名 HTML 標(biāo)簽的開(kāi)始和結(jié)束標(biāo)簽。避免只修改了開(kāi)始標(biāo)簽，而忘記修改結(jié)束標(biāo)簽。該擴(kuò)展適用于 HTML、XML、PHP 和 Javascript。

作者：毅航
鏈接：https://juejin.cn/post/7296017069413810212
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。