本文介紹5個非常實用的VS Code插件。

1. Prettier

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier 是一個代碼格式化程序，它會自動格式化代碼，使代碼看起來更“漂亮”；還會修復代碼中的任何多余空格或不均勻的括號。

2. Bracket Pair Colorizer

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 可以幫助開發者快速查找括號、括號和大括號，它通過為每個匹配的括號對分配不同的顏色來實現這一點。當光標位于一對括號內時，Bracket Pair Colorizer 會顯示一條與括號對相同顏色的線條，將它們連接在一起，從而幫助識別每個開放括號的相應閉合括號的位置。

圖片

此插件可以提高編碼效率，減少由于括號錯誤導致的 bug。

3. Auto Rename Tag

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag 非常實用，可以為開發人員節省很多時間和精力。它可以同時編輯開放標簽和關閉標簽的標簽類型，使編寫 HTML 標簽變得更加輕松快捷。而且，當開發人員在開放標簽中按下空格鍵時，第二個標簽將停止復制，因此開發人員可以方便地為標簽添加類名、href、ID 等屬性。這個插件可以大大提高開發效率，減少編寫錯誤的幾率，是 Web 開發人員的必備工具。

圖片

4. VSCode-Icons

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

如果你非常在乎軟件界面的視覺效果，那么會喜歡這個插件。這是一個為文件提供更多圖標的擴展包，它可以幫助開發人員更快地識別和區分不同類型的文件。即使原來沒有對應的唯一圖標，這個擴展包也會為不同類型的文件提供更多的圖標。這樣一來，開發人員就可以更輕松地在多個文件之間進行切換和管理了。

以下是圖標的示例：

圖片

5. CSS Peek

安裝鏈接：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

CSS Peek 允許開發人員在正在懸停的當前元素上查看所有 CSS 信息。這可以節省很多時間，同時在編碼 HTML 或 JS 文件時允許更改 CSS 文件。它還可以用于僅查看和參考使用 CSS 顯示的特定代碼片段的方式。

• Peek：內聯加載 CSS 文件并做快速編輯（Ctrl/Command+Shift+F12）
• Go To：直接轉到 CSS 文件或在新編輯器中打開它（F12）

圖片