前端開發師所需要了解的28個Visual Studio Code提高效率的插件

在 Build 2015 大會上，微軟發布的最大驚喜莫過於宣布推出免費跨平台的 Visual Studio Code 編輯器了！這款軟件跨平台支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作……那麼今天就跟著小編一起來探索一下這其中開發師所需要了解的28個Visual Studio Code提高效率的插件。

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義快捷鍵、括號匹配和顏色區分、代碼片段、代碼對比 Diff、GIT命令 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。

01.Material主題

Visual Studio Code史詩級的主題！

地址：

16.匹配的括號彩色高亮(Bracket Pair Colorizer)

如果你的代碼有很多的回調，那麼這種高亮可以幫助你更好地區分不同的代碼塊。

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

17.Color Highlight

直觀展示你定義的顏色。

地址：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight#review-details

18.CSS Peek

可以在HTML中通過CSS id或則class來定位到其定義。

地址：https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

19.Debugger for Chrome

用Chrome來Debug你的JavaScript代碼，或則其它支持Chrome Debugger協議的平台。

地址：https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

20.Quokka.js

實時執行JavaScript代碼(做快速的demo很有用)。

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

21.Trailing Spaces

高亮那些冗餘的空格，可以快速刪掉。

地址：https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

22.TypeScript Hero

輔助用TypeScript編程的童鞋！

地址：https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

23.WakaTime

從你的使用習慣中生成數據報表。

地址：https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

24.Vetur

VS Code下麵的Vue工具！有Pine Wu開發，已經累計400多萬下載量！

地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

25.Code Runner

支持多種語言的代碼的立即執行。支持的語言：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。

地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

26.PHP IntelliSense

適用於Visual Studio Code的高級PHP IntelliSense。

地址: https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

27.vscode-icons

Icon集合。

地址: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

28.React.js code snippets

用ES6語法去開發React.js應用非常方便。

地址：https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

作者：技術學派  來源：今日頭條