本文介紹5個(gè)非常實(shí)用的VS Code插件。

1. Prettier

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

Prettier 是一個(gè)代碼格式化程序，它會(huì)自動(dòng)格式化代碼，使代碼看起來更“漂亮”；還會(huì)修復(fù)代碼中的任何多余空格或不均勻的括號(hào)。

2. Bracket Pair Colorizer

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

Bracket Pair Colorizer 可以幫助開發(fā)者快速查找括號(hào)、括號(hào)和大括號(hào)，它通過為每個(gè)匹配的括號(hào)對(duì)分配不同的顏色來實(shí)現(xiàn)這一點(diǎn)。當(dāng)光標(biāo)位于一對(duì)括號(hào)內(nèi)時(shí)，Bracket Pair Colorizer 會(huì)顯示一條與括號(hào)對(duì)相同顏色的線條，將它們連接在一起，從而幫助識(shí)別每個(gè)開放括號(hào)的相應(yīng)閉合括號(hào)的位置。

圖片

此插件可以提高編碼效率，減少由于括號(hào)錯(cuò)誤導(dǎo)致的 bug。

3. Auto Rename Tag

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

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

圖片

4. VSCode-Icons

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

如果你非常在乎軟件界面的視覺效果，那么會(huì)喜歡這個(gè)插件。這是一個(gè)為文件提供更多圖標(biāo)的擴(kuò)展包，它可以幫助開發(fā)人員更快地識(shí)別和區(qū)分不同類型的文件。即使原來沒有對(duì)應(yīng)的唯一圖標(biāo)，這個(gè)擴(kuò)展包也會(huì)為不同類型的文件提供更多的圖標(biāo)。這樣一來，開發(fā)人員就可以更輕松地在多個(gè)文件之間進(jìn)行切換和管理了。

以下是圖標(biāo)的示例：

圖片

5. CSS Peek

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

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

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

圖片