15 款好用的 VS Code 插件

作者丨Javascript Jeep

譯者丨平川

策劃丨萬佳

VS Code 有個市場，提供很多插件，開發人員可以把它們安裝到文本編輯器，增強編輯器功能。在視圖菜單中，選擇擴展選項或按下 shift + cmd + X 即可進入市場。

善用 VS Code 插件，不僅節省時間，還能提高工作效率，讓你成為更好的開發人員。

1. LiveCookr

該插件允許我們在更改 IDE 中的代碼時，自動重新加載 Web 頁面。

一旦安裝 LiveCookr 後，在 html 文件上右鍵單擊，可看到選項 Open with LiveCookr[Alt + L + Q]。

下載地址：

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

2. Quokka.js

Quokka.js 會在你輸入時自動計算結果，並在 IDE 中列印結果。

下載地址：

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

3. Code Spell Checker

它是一款拚寫檢查程序，可以為開發者報告一些常見的拚寫錯誤。它很適合駝峰式代碼。

下載地址：

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

4. GitLens

GitLens 可增強 Visual Studio Code 中內置的 Git 功能。

它不僅能幫助你通過 Git blame 注解直觀地看到代碼作者，而且還可以無縫瀏覽和探索 Git 存儲庫，通過強大的比較命令獲得有價值的見解，等等。

下載地址：

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

5. Prettier

Prettier 是一個嚴格基於規則的代碼格式化程序。

它解析代碼並使用自己的規則重新列印代碼，從而實現風格一致。這是一個重要的工具，無需開發人員做任何工作，它就能讓我們獲得格式正確的代碼。

Prettier 提供合理的默認值，但你也能在項目的根目錄下提供一個配置文件來設置自己的標準，比如行長度、製表符 / 空格的數量等等。

下載地址：

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

6.ESLint

ESLint 是一款靜態代碼分析工具，用來識別 JavaScript 代碼中出現的有問題的模式。

ESLint 中的規則是可配置的，用戶可以定義和加載自己的規則。它還涵蓋了代碼質量和編碼風格問題。

下載地址：

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

7. vscode-icons

該插件會基於文件擴展名在 the tree view 中的文件名旁添加圖標，讓你更容易地識別文件。

‍

下載地址：

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

8. Live Saas Compiler

它能幫你實時把 SASS/SCSS 文件編譯 / 轉譯成 CSS 文件，並且提供在線瀏覽器重載。

下載地址：

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

9. JavaScript (ES6) code snippets

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

下載地址：

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

10. Browser Preview

它可以讓你在編輯器中打開一個用於調試的真正的瀏覽器預覽。

下載地址：

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

11. Path Intellisense

該擴展可以自動補全代碼中的路徑和文件名。

下載地址：

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

12.Bracket Pair Colorizer

這個擴展允許用顏色來標識匹配的括號。用戶可以定義要匹配的字元和要使用的顏色。

下載地址：

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

13. Vim

VSCodeVim 是一個用於 Visual Studio Code 的 Vim 仿真器，為你的文本編輯器帶來 Vim 的強大功能。

下載地址：

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

這個擴展可以風格化在你的文件中找到的 css/web 顏色，所以你無需打開頁面就能看到它們是什麽顏色。

下載地址：

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

https://levelup.gitconnected.com/15-vs-code-extension-to-save-your-time-and-make-you-a-better-developer-506f79baec53?gi=48e658e79f2b

點個在看少個 bug