## 為什麼VSCode如此受歡迎 Visual Studio Code在開發人員中迅速流行起來，它是最流行的開發環境，可定製性是其流行的原因之一。  因此，如果你正在使用VSCode，這裡有一個擴充套件列表，你必須提高你的工作效率。 ## 1. [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 當你與你的團隊成員在一個專案上工作時，這個擴充套件使用VSCode的強大功能，幫助你視覺化程式碼創作一目瞭然。 它顯示了特定程式碼何時提交或更改，以及是誰更改了它。 有時，你的團隊成員提交的程式碼可能會破壞專案的其他功能，這在那段時間是有幫助的。你可以在這裡找到它。  ## 2. [Wallaby.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode) js是一個智慧的JavaScript測試執行器，它可以持續執行你的測試。 當您更改程式碼時(甚至不儲存檔案)，它將直接向程式碼編輯器報告程式碼覆蓋率和其他結果。 這個擴充套件有助於提高您的開發效率。  ## 3. [TypeScript Hero](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero) TypeScript是JavaScript的一個超集，具有可選的型別，並可編譯為純JavaScript。 當我們使用TypeScript時，這個擴充套件就派上用場了。它通過一個名為“燈泡”的功能對你的匯入檔案進行分類和組織，並修復編碼錯誤。  ## 4. [Prettier Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) Prettier是一種固執的程式碼格式，它使開發人員在程式碼格式方面的工作變得更容易。 您可以將其配置為儲存時格式化，並在儲存時格式化程式碼。 一旦你有了這個擴充套件，你將永遠不必擔心格式化的程式碼。  ## 5. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 如果你在React或Angular等JavaScript庫上工作，而且你在做大型專案，你就知道在匯入時找到元件的確切路徑有多煩人。 這個擴充套件可以幫助你自動完成匯入的路徑。 它還可以幫助您自動完成HTML檔案中的檔案引用。  ## 6. [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) 我們都知道有時候除錯是多麼煩人，所以這個擴充套件被用來幫助你除錯JavaScript程式碼。 它是由微軟開發的。我們可以設定斷點、逐步執行程式碼、動態新增除錯指令碼等等。 假設我們有一個不確定是否正在執行的函式，這個擴充套件可以通過在執行時在偵錯程式中暫停來幫助我們。  ## 7. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 這個擴充套件允許匹配的括號被識別的顏色。 當你在除錯過程中處理一個巨大的程式碼庫時，這個擴充套件就像救星一樣。 使用者可以定義要匹配的字元和要使用的顏色。  ## 8. [JavaScript (ES6) Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) 如果您是一名JavaScript開發人員，這可以為您節省大量時間。 當你想快速構建新專案時，這可能會有幫助。 它沒有鍵入全部程式碼，而是為最常見的JavaScript函式預定義了許多程式碼片段。 它支援TypeScript、React、Vue和HTML。 如果你在React上工作，有一個類似的擴充套件。(ES7 React/Redux/GraphQL/React-Native snippets)。  ## 9. [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 當您與您的團隊成員一起解決問題，並希望在編輯器上共同處理相同的程式碼時，這將幫助您將程式碼編輯器的控制權交給您的團隊成員，您可以同時處理它。 您還可以共享終端例項、本地主機web應用程式、語音通話等。  ## 10. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 由於JavaScript是一種高度靈活的語言，一些小錯誤可能會導致巨大的問題。 因此，當工作在巨大的程式碼庫，我們需要一個linter和一個格式化程式。 這個擴充套件可以幫助你做到這一點。 這可以自動格式化你的程式碼，並發現你的程式碼中的錯誤。 實現ESLint規則會讓你離為你的程式碼庫建立良好的標準更近一步。  ## 11. [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) 作為一名開發人員，您經常要處理api。 眾所周知，api中最常用的資料結構是JSON。 為了避免一些可能破壞應用程式的型別錯誤，我們使用類或介面。 這個擴充套件可以用JSON資料生成一個類。 因此，與其手工編寫類，我們可以使用它來節省建立類的時間和負擔。 這個擴充套件支援大多數流行的語言。  ## 12. [Peacock](http://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) 當你在多個工作空間上工作時，這個擴充套件可以幫助你識別你已經切換到或工作的確切的工作空間。  ## 13. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 這個擴充套件可以幫助您在程式碼中建立更人性化的註釋。 它允許您為不同型別的註釋提供不同的顏色程式碼，這些註釋可以是TODOs、高亮顯示、警報和其他型別的註釋。 這是強烈推薦的，用於編寫乾淨和文件化的程式碼。  ## 14. [Search node_modules](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules) 當我們構建元件庫並在不同的應用程式中使用該元件時，我們肯定會對節點模組進行一些修改。 這個擴充套件允許你在專案的node_modules目錄中快速瀏覽檔案。  ## 15. [Rest Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) 作為開發人員，我們每天都會定期使用Postman來檢查API的響應。 這個擴充套件允許你做一個HTTP請求，並在VSCode中直接檢視響應，而不是在兩個應用程式之間切換，這個擴充套件為你做這個工作。  ## 其他精彩文章 * [【分享】73 個提高生產力的很棒的 NPM 包【譯】](https://pro.qiuzhi99.com/posts/73-great-npm-packages-that-improve-productivi