VSCode 是一個開源的跨平臺編輯器，已經成爲程序員的最愛，特別是在 Web 開發社區。 它快速，可擴展，可定製，並具備大量功能。 若是你尚未使用 VSCode ，你應該瞭解一下。php
VSCode 已經有了數千個擴展。 我將在這篇文章中列出我平常使用的一些擴展。 讓咱們開始！css
Quokka.js
Quokka.js 是一個用於 JavaScript 和 TypeScript 的實時運行代碼平臺。 這意味着它會在你輸入後當即運行您的代碼，並在您的代碼編輯器中顯示各類執行結果。 建議你親自嘗試一下。html
安裝此擴展後，能夠按 Ctrl/Cmd(⌘) + Shift + P 顯示編輯器的命令選項面板，而後鍵入 Quokka 以查看可用命令的列表。 選擇並運行 「新建JavaScript文件」 命令。 您也能夠按（⌘ + K + J）直接打開文件。 您在此文件中鍵入的任何內容都會當即執行。前端
- Code Runner – 支持多種語言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
- Runner
括號配對着色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)
花括號和園括號是許多編程語言不可分割的部分。在 JavaScript 等語言中，在一屏代碼中花括號和園括號可能有多層嵌套，然而缺沒有簡單的機制來識別這些括號從哪裏開始，又在哪裏結束對。歡迎使用 括號配對着色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)。這是兩個不一樣的擴展。然而，他們就像是一對情侶，能夠完美的配合使用。這些擴展將爲您的編輯器添加一系列顏色，並使代碼塊易於辨別和使人愉悅。一旦你習慣了它們，若是 VSCode 沒有它們就會讓人以爲很平淡。vue
愚人碼頭注：彩虹縮進(Indent Rainbow)擴展爲每一個縮進層級用四種不一樣顏色交替着色。html5
使用括號配對着色(Bracket Pair Colorizer) 和 彩虹縮進(Indent Rainbow)後
代碼片斷(Snippets)
代碼片斷(Snippets)就是在編輯器中使用縮寫。 例如，你想在編輯中編寫 import React from 'react'; 這樣一段代碼，經過代碼片斷(Snippets)，你能夠輸入 imr 並按 Tab 鍵來展開此代碼段。 一樣，clg 會展開爲 console.log。java
各類各樣的框架和類庫都有不少代碼片斷：Javascript（或任何其餘語言），React，Redux，Angular，Vue，Jest。 我我的認爲 Javascript 代碼片斷很是有用，由於我主要使用 JS 。node
一些很好的代碼片斷擴展 –react
- JavaScript (ES6) code snippets
- React-Native/React/Redux snippets for es6/es7
- React Standard Style code snippets
TODO高亮
一般在進行編碼時，你認爲可能有更好的方法來執行相同的操做。 這時你留下注釋// TODO: 須要重構 或其餘相關的東西。 可是你很容易忘記了這個註釋，並將你的代碼推送到主版本庫(master) 或者生產環境(production)。 可是你若是使用 Todo Highlighter（高亮），這鐘請客就不會發生。
它以鮮豔的顏色突顯您的 「TODO」 / 「FIXME」 或代碼中的任何其餘註釋，所以它始終清晰可見。 另外還有一個很好的功能是 List Highlighted annotations 。 它會在控制檯中列出了全部 TODO 。
- Todo+ — 更強大的 Todo 高亮擴展，具備更多功能。
- Todo Parser
Import Cost(花銷)
Import Cost 容許您查看導入模塊的大小。 這對 Webpack 等打包工具來講是一個巨大的幫助。 您能夠查看是導入整個庫仍是僅導入特定實用程序。
不足之處是它不顯示自定義文件或模塊的花銷。
REST Client
做爲Web開發人員，咱們常常須要使用 REST API。爲了檢查URL並檢查響應，使用 Postman 等工具。可是，當編輯器能夠輕鬆完成相同的任務時，爲何還要使用不一樣的應用程序呢。歡迎使用 REST Client。它容許您在Visual Studio Code中直接發送 HTTP 請求並查看響應。
自動閉合標記(Auto Close Tag)和自動重命名標記(Auto Rename Tag)
自從 React 問世以及它在過去幾年中得到的關注度，類 HTML 的 JSX 語法如今很風靡。咱們再次在 JavaScript 代碼中使用使用標記。任何 Web 開發人員都會告訴您輸入標記很麻煩。在大多數狀況下，咱們須要一種可以快速輕鬆地生成標籤及其子代的工具。VSCode 中內置的 Emmet 就是一個很是好的例子。可是，有時候，你只想要一些簡單而簡潔的東西。例如自動更新標記，它在您鍵入開始標記時自動生成結束標記。當您更改同一個標記對時，結束標記會自動更改。 這兩個擴展就是這樣作的。
它還適用於JSX和許多其餘語言，如XML，PHP，Vue，JavaScript，TypeScript，TSX。
在這裏獲取這兩個擴展 – 自動閉合標記(Auto Close Tag) 和 自動重命名標記(Auto Rename Tag)
使用 Auto Close Tag相似的擴展 –
- Auto Complete Tag — 結合自動重命名和自動閉合標記的功能。
- Close HTML/XML tag
GitLens
正如其做者所說，GitLens加強了Visual Studio Code中內置的Git功能。 它包含了許多強大的功能，例如經過跟蹤代碼顯示的代碼做者，提交搜索，歷史記錄和GitLens資源管理器。 您能夠在 此處 閱讀這些功能的完整說明。 我只想說你應該安裝這個插件，若是你使用git作任何事情的話。
相似的擴展 –
- Git History — 顯示提交歷史的精美圖表等等。推薦。
- Git Blame — 它容許您在狀態欄中查看當前所選行的Git Blame信息。 GitLens也提供了相似的功能。
- Git Indicators — 它容許您查看受影響的文件以及狀態欄中添加或刪除的行數。
- Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它容許您使用單個命令在瀏覽器中打開repo。
Git項目管理器(Git Project Manager,GPM)
Git項目管理器(Git Project Manager,GPM)容許您直接從 VSCode 窗口打開一個針對Git存儲庫的新窗口。 基本上，你能夠打開另外一個存儲庫而無需離開VSCode。
安裝此擴展後，您必須將 gitProjectManager.baseProjectsFolders 設置爲包含 repos 的URL列表。例如：
- {
- "gitProjectManager.baseProjectsFolders": [
- "/home/user/nodeProjects",
- "/home/user/personal/pocs"
- ]
- }
- Project Manager – 我沒有親自使用它，但它有百萬+安裝。因此建議你必定要看一下。
Indenticator(縮進指示器)
Indenticator(縮進指示器) 在視覺上突出顯示當前的縮進深度。所以，如今您能夠輕鬆區分在不一樣層次縮進的各類代碼塊。
VSCode Icons
使您的編輯更具吸引力的圖標！
Dracula (主題)
Dracula 是我最喜歡的主題。
其它推薦
- Fira Code — 帶編程連體字的等寬字體。 愚人碼頭注：clone 項目後，找到
ttf文件夾，而後安裝該文件夾中的字體文件。從新啓動 VSCode ，選擇TOOLS -> Options -> Fonts and Colors ，選擇 Fira Code 便可 - Live Server — 一個具備靜態和動態頁面的實時從新加載功能的本地開發服務器。
- EditorConfig for VS Code – 此插件嘗試使用.editorconfig文件中的設置覆蓋用戶/工做區設置。 不須要其餘或特定於 vscode 的文件。 與任何EditorConfig插件同樣，若是未指定root = true，EditorConfig將繼續在項目外部查找.editorconfig文件。
- Prettier for VSCode — 一個代碼格式化工具。
- Bookmarks – 它能夠幫助您在代碼中導航，輕鬆快速地在重要位置之間移動。再也不須要搜索代碼。它還支持一組選擇命令，容許您選擇書籤線和書籤線之間的區域。它對日誌文件分析很是有用。
- Settings Sync — 容許您在 Gist 中保存用戶設置，擴展名和快捷鍵綁定，以便您能夠在幾分鐘內設置新的 VSCode。
- Multiple clipboards for VSCode — 覆蓋常規的「複製」和「剪切」命令，以將選擇保留在剪貼板中。還增長了將幾個文本塊複製到單個複製緩衝區的功能。
- Path Intellisense — Visual Studio Code插件，可自動填充文件名。
- Version Lens — 在Visual Studio代碼編輯器中顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息。
這些是我常用的一些VSCode擴展。您還喜歡其餘哪些擴展和主題？歡迎留言告訴我，很是感謝！
Visual Studio Code 相關熱文
原文連接：https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5