30個極大提高開發效率的VSCode插件
30個極大提高開發效率的Visual Studio Code插件blog.fundebug.com
譯者按： 看完這篇文章，我打算從Sublime Text轉到Visual Studio Code了！
- 原文:
- 譯者:
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
我們的VSC(VSCode)將會像一個長了五只可以發射激光的獨角獸一樣！接下來會介紹我每天使用的非常有用的插件。
如果你還是一個VSC的新手，那么點擊左側最下方的按鈕來安裝插件。
Material Theme
下載量：130萬
Visual Studio Code最悠久的主題！
插件地址：
Material Theme - Visual Studio Marketplacemarketplace.visualstudio.com
Auto Import
下載量：46萬
自動去查找、分析、然后提供代碼補全。對於TypeScript和TSX，可以適用。
插件地址：
Auto Import - Visual Studio Marketplacemarketplace.visualstudio.com
Import Cost
下載量：41萬
該插件會在行尾顯示導入的包的大小。為了計算包大小，該插件要使用Webpack和babili-webpack-plugin。
插件地址：
Import Cost - Visual Studio MarketplaceIndent-Rainbow
下載量：13萬
一個簡單的插件可以使得對齊更加具有可讀性。
插件地址：
indent-rainbow - Visual Studio Marketplacemarketplace.visualstudio.com
IntelliSense for CSS class names in HTML
下載量：243萬
基於你的項目以及通過link標簽引用的外部文件，該智能插件提供HTML中CSS class名字的補全。
插件地址：
IntelliSense for CSS class names in HTML - Visual Studio Marketplacemarketplace.visualstudio.com
SVG Viewer
下載量：29萬
一個用來預覽SVG的插件。
插件地址：
SVG Viewer - Visual Studio Marketplacemarketplace.visualstudio.com
Prettier
下載量：357萬
你絕對不能少了這個插件，你需要它來一鍵美化你的JavaScript/TypeScript/CSS代碼。
插件地址：
Prettier - Code formatter - Visual Studio Marketplacemarketplace.visualstudio.com
React Native Tools
下載量：218萬
代碼提示、Debugging、集成RN的命令。
插件地址：
React Native Tools - Visual Studio Marketplacemarketplace.visualstudio.com
Sublime Text Keymap and Settings Importer
下載量：76萬
竟然有76萬的安裝量，看來不少人從Sublime Text轉移過來了。
這個插件將visual studio code的快捷鍵綁定改成了和Sublime Text 3一樣。你可以試一試：cmd + P (Mac)，ctrl + P (Windows)。
你可以跳轉到文件，如果在搜索前添加>符號，你甚至可以搜索動作，比如打開內置的終端、安裝插件等等。
對於習慣使用ST3的人，這是一個很大的加分項。
插件地址：
Sublime Text Keymap and Settings Importer - Visual Studio Marketplacenpm Intellisense
下載量：88萬
VSCode 插件可以在導入語句自動補全npm模塊名稱。
插件地址：
npm Intellisense - Visual Studio Marketplacemarketplace.visualstudio.com
lit-html
下載量：3萬
在JavaScript/TypeScript的文件中，如果有使用到HTML標記，lit-html提供語法高亮和相應的補全支持。
插件地址：
lit-html - Visual Studio Marketplacemarketplace.visualstudio.com
highlight-matching-tag
下載量：6萬
這本來應該是VSCode應該默認提供的功能，高亮匹配的標簽。
插件地址：
highlight-matching-tag - Visual Studio Marketplacemarketplace.visualstudio.com
GitLens
下載量：772萬
啥也別說，直接上圖！
插件地址:
GitLens — Git supercharged - Visual Studio Marketplacemarketplace.visualstudio.com
Git Project Manager
下載量：37萬
Git Project Manager可以然你直接一鍵搜索並打開某個的基於Git管理的項目。
插件地址:
Git Project Manager - Visual Studio Marketplacemarketplace.visualstudio.com
Git History
下載量：332萬
用來查看git log或則一個文件的git歷史，比較不同的分支，commits。
插件地址：
Git History - Visual Studio Marketplacemarketplace.visualstudio.com
File Utils
下載量：8萬
提供了一個更加簡潔的方法來創建、復制、移動、重命名、刪除文件/文件夾。
插件地址：
File Utils - Visual Studio MarketplaceBracket Pair Colorizer
下載量：228萬
如果你的代碼有很多的回調，那么這種高亮可以幫助你更好地區分不同的代碼塊。
插件地址：
Bracket Pair Colorizer - Visual Studio Marketplacemarketplace.visualstudio.com
Color Highlight
下載量：25萬
直觀展示你定義的顏色。
插件地址：
Color Highlight - Visual Studio Marketplacemarketplace.visualstudio.com
CSS Peek
下載量：23萬
可以在HTML中通過CSS id或則class來定位到其定義。
插件地址：
CSS Peek - Visual Studio Marketplacemarketplace.visualstudio.com
Debugger for Chrome
下載量：1111萬
用Chrome來Debug你的JavaScript代碼，或則其它支持Chrome Debugger協議的平台。
插件地址：
Debugger for Chrome - Visual Studio Marketplacemarketplace.visualstudio.com
Quokka.js
下載量：172萬
實時執行JavaScript代碼(做快速的demo很有用)。
插件地址：
Quokka.js - Visual Studio Marketplacemarketplace.visualstudio.com
Trailing Spaces
下載量：7萬
高亮那些冗余的空格，可以快速刪掉。
插件地址：
Trailing Spaces - Visual Studio Marketplacemarketplace.visualstudio.com
TypeScript Hero
下載量：72萬
輔助用TypeScript編程的童鞋！
插件地址：
TypeScript Hero - Visual Studio Marketplacemarketplace.visualstudio.com
WakaTime
下載量：24萬
從你的使用習慣中生成數據報表。
插件地址：
WakaTime - Visual Studio Marketplacemarketplace.visualstudio.com
Vetur
下載量：451萬
VS Code下面的Vue工具！有Pine Wu開發，已經累計400多萬下載量！
插件地址：
Vetur - Visual Studio Marketplacemarketplace.visualstudio.com
Code Runner
下載量：346萬
支持多種語言的代碼的立即執行。支持的語言：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D。
插件地址：
Code Runner - Visual Studio MarketplacePHP IntelliSense
下載量：415萬
插件地址:
PHP IntelliSense - Visual Studio Marketplacemarketplace.visualstudio.com
vscode-icons
下載量：799萬
Icon集合。
插件地址:
vscode-icons - Visual Studio Marketplacemarketplace.visualstudio.com
Jest
下載量：29萬
愉快地使用Facebook的Jest。
插件地址：
Jest - Visual Studio Marketplacemarketplace.visualstudio.com
React.js code snippets
下載量：59萬
用ES6語法去開發React.js應用非常方便。
插件地址：
Reactjs code snippets - Visual Studio Marketplacemarketplace.visualstudio.com
關於Fundebug
Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！