用好 VS Code 插件，不僅能節(jié)省你的時(shí)間，還能提高工作效率。

VS Code 有個(gè)市場(chǎng)，它提供很多插件。開(kāi)發(fā)人員可以把插件安裝到文本編輯器，增強(qiáng)編輯器功能。在視圖菜單中，選擇擴(kuò)展選項(xiàng)或按下 shift + cmd + X 即可進(jìn)入市場(chǎng)。

善用 VS Code 插件，不僅節(jié)省時(shí)間，還能提高工作效率，讓你成為更好的開(kāi)發(fā)人員。

1. Live Server

該插件允許我們?cè)诟?IDE 中的代碼時(shí)，自動(dòng)重新加載 Web 頁(yè)面。

一旦安裝 Live Server 后，在 html 文件上右鍵單擊，可看到選項(xiàng) Open with Live Server[Alt + L + Q]。

下載地址：

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Quokka.js

Quokka.js 會(huì)在你輸入時(shí)自動(dòng)計(jì)算結(jié)果，并在 IDE 中打印結(jié)果。

下載地址：

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

3. Code Spell Checker

它是一款拼寫檢查程序，可以為開(kāi)發(fā)者報(bào)告一些常見(jiàn)的拼寫錯(cuò)誤。它很適合駝峰式代碼。

下載地址：

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

4. GitLens

GitLens 可增強(qiáng) Visual Studio Code 中內(nèi)置的 Git 功能。

它不僅能幫助你通過(guò) Git blame 注解直觀地看到代碼作者，而且還可以無(wú)縫瀏覽和探索 Git 存儲(chǔ)庫(kù)，通過(guò)強(qiáng)大的比較命令獲得有價(jià)值的見(jiàn)解等等。

下載地址：

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

5. Prettier

Prettier 是一個(gè)嚴(yán)格基于規(guī)則的代碼格式化程序。

它解析代碼并使用自己的規(guī)則重新打印代碼，從而實(shí)現(xiàn)風(fēng)格一致。這是一個(gè)重要的工具，無(wú)需開(kāi)發(fā)人員做任何工作，它就能讓我們獲得格式正確的代碼。

Prettier 提供合理的默認(rèn)值，但你也能在項(xiàng)目的根目錄下提供一個(gè)配置文件來(lái)設(shè)置自己的標(biāo)準(zhǔn)，比如行長(zhǎng)度、制表符 / 空格的數(shù)量等等。

下載地址：

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

6. ESLint

ESLint 是一款靜態(tài)代碼分析工具，用來(lái)識(shí)別 JavaScript 代碼中出現(xiàn)的有問(wèn)題的模式。

ESLint 中的規(guī)則是可配置的，用戶可以定義和加載自己的規(guī)則。它還涵蓋了代碼質(zhì)量和編碼風(fēng)格問(wèn)題。

下載地址：

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

7. vscode-icons

該插件會(huì)基于文件擴(kuò)展名在 the tree view 中的文件名旁添加圖標(biāo)，讓你更容易地識(shí)別文件。

下載地址：

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

8. Live Saas Compiler

它能幫你實(shí)時(shí)把 SASS/SCSS 文件編譯 / 轉(zhuǎn)譯成 CSS 文件，并且提供在線瀏覽器重載。

下載地址：

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

9. JavaScript (ES6) code snippets

這個(gè)插件包含面向 VS Code 編輯器的 ES6 語(yǔ)法的 JavaScript 代碼片段（支持 JavaScript 和 TypeScript）。

下載地址：

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

10. Browser Preview

它可以讓你在編輯器中打開(kāi)一個(gè)用于調(diào)試的真正的瀏覽器預(yù)覽。

下載地址

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

11. Path Intellisense

該擴(kuò)展可以自動(dòng)補(bǔ)全代碼中的路徑和文件名。

下載地址：

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

12. Bracket Pair Colorizer

這個(gè)擴(kuò)展允許用顏色來(lái)標(biāo)識(shí)匹配的括號(hào)。用戶可以定義要匹配的字符和要使用的顏色。

下載地址：

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

13. Vim

VSCodeVim 是一個(gè)用于 Visual Studio Code 的 Vim 仿真器，為你的文本編輯器帶來(lái) Vim 的強(qiáng)大功能。

下載地址：

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

14. TODO Highlight

高亮顯示代碼中的 TODO、FIXME 及其他注解。

下載地址：

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

15. Color Highlight

這個(gè)擴(kuò)展可以風(fēng)格化在你的文件中找到的 css/web 顏色，所以你無(wú)需打開(kāi)頁(yè)面就能看到它們是什么顏色。

下載地址：

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight