提高 Web 開發效率的 VS Code 擴展

在咱們開始以前，先看看你可否回答這個問題：Visual studio Code 和 Visual Studio 的區別是什麼？

怕有人不知道，我仍是簡單說明一下。Visual Studio 是一個功能全面且便捷的集成開發環境，而 VS Code 則是一個開源、跨平臺的源碼編輯器，在 web 開發羣體中尤爲出名。它不只快速、可擴展、可自定義，並且還有大量功能。

我已經使用 VS Code 好久了，做爲一名全棧開發者，我也嘗試過各類擴展。本文將介紹一些對個人開發工做起到很大幫助的擴展，但願能對你有所幫助。

讓代碼易於閱讀和維護

Bracket Pair Colorizer 2：可讓配對的括號顯示相同的顏色。

Indent Rainbow：爲文本前面的縮進着色，每個縮進都有 4 種可選顏色。

使用上面兩個擴展後，你的編輯器就會鋪滿各類顏色，這可讓代碼塊更容易閱讀，同時起到護目的效果。一旦你習慣了它們，VS Code 就再也不平淡無奇了。

AutoClose Tag 和 Auto Rename Tag：手動輸入標籤對每個 web 開發者來講都是一件痛苦的事情。咱們須要一個能夠快速簡便生成標籤以及子標籤的工具。

AutoClose 能夠在你輸入開始標籤的時候生成閉合標籤。Auto Rename 則能夠在你修改一半標籤時，自動同步修改另外一半標籤。

Indenticator： 高亮當前的縮進位置，當代碼很長時能夠派上用場。

VS Code Icons： 提供文件圖標，能夠提升編輯器的顏值

Dracula：這是一直以來鍾愛的一個主題

Prettier：經過解析代碼並根據本身的規則從新打印，從而實現一致的代碼風格。Prettier 考慮了最大行長，並能夠在必要的時候進行換行。嘗試本身安裝一下並領略它的魅力。

Path Intellisense：這是最佳的自動補齊文件名的擴展

ESlint 或者 TSlint：想要讓代碼保持一致而且避免 bug，這些代碼檢查工具是必不可少的。

基本操做

Code Spell Checker：一個能夠搭配駝峯式代碼使用的拼寫檢查擴展。高度推薦。

Change-case：改變當前所選詞的大小寫。

Pegex Previewer：在並排的文檔中高亮當前正則表達式的匹配項，一般用於添加驗證檢查。

Partial Diff：可讓你比較一個文件中、文件之間或者剪貼板上的 diff 文本段。

Copy With Line Number：複製選中的行以及行號和文件路徑。這在協同編程以及向同事求助時頗有用，可讓他們快速定位到代碼位置。固然，對於編寫文檔也是頗有幫助的。

Paste Image：直接從剪貼板上粘貼圖片到 Markdown，AsciiDoc 或者其它文件。我習慣在 Git README 文件或者 Markdown 文檔中使用這個擴展。

TinyPNG: 能夠無損壓縮 jpg 和 png 圖片文件

Polacode: 能夠爲你的代碼塊建立好看的截圖。只須要安裝擴展並啓動，以後複製粘貼代碼到 Polacode 便可。接着你就能夠下載這個截圖了。我很喜歡這個擴展。

調試

Turbo Console.log: 這個擴展能夠自動編寫 log 信息打印語句，從而讓調試更加簡單。

Debugger for Chrome: 能夠在 Chrome 瀏覽器中對 JavaScript 代碼進行調試

版本控制

Git Lens: GitLens 加強了內置的 Git，它包含了大量功能，例如經過 code lens 展現的 authorship，提交檢索、歷史記錄以及 Gitlens 瀏覽器等。若是你進行的工做與 Git 相關，那麼這個插件必不可少。

和 GitLens 相似的擴展：

• Git History: 將提交歷史等記錄以漂亮的圖表展現出來。
• Checkpoints: 在各個提交之間保留正在進行的工做的本地短時間歷史紀錄。
• Git Blame: 能夠在狀態欄顯示當前選中行的 Git Blame 信息。GitLens 也提供了相似的功能。
• Git Indicators: 能夠在狀態欄查看受影響的文件以及新增或者刪減的行數。
• Open in GitHub/Bitbucket/Gitlab/VisualStudio.com: 能夠用單命令在瀏覽器中開啓倉庫。

Version Lens: 在 Visual Studio Code 編輯器中展現 npm， jspm， DUB 以及 Dotnet Core 中安裝包的版本信息。

Markdown

Markdown Shortcuts: 快捷編寫 Markdown.我通常用它來寫 README 文件。

Markdown Preview Enhanced: 這個動態的預覽擴展可讓你一邊編寫 markdown 文件，一邊預覽效果。

衡量開發效率

WakaTime 或者 Code Time: 經過編程活動自動生成的指標、統計以及時間追蹤。

其它

Settings Sync: 能夠將你的 VS Code 配置同步到 Github 上，包括基礎設置、熱鍵和 VS Code 擴展。此後能夠在任何打算用來編程的設備上將這些配置進行同步，而不須要在一臺新設備的原生 VS Code 環境中進行編程，也不須要再重複配置。

Project Manager: 能夠直接在 VS Code 中打開指向某個 Git 倉庫的新窗口。基本上，你如今能夠在不離開 VS Code 界面的狀況下打開任意一個倉庫。

Quokka.js: 在輸入代碼的時候即時運行代碼，同時在編輯器中顯示不一樣的執行結果。你能夠本身嘗試一下。

TODO Highlighter: 在將代碼發佈到生產環境以前，你可能會忘記 review 一下以前寫的 TODOs。以前我一直都但願有一個擴展能夠將這些 TODOs 高亮，而且提醒我還有一些未完成的工做。

Import Cost: 這個擴展能夠用在行內展現導入包的大小，它利用帶有 babili-webpack-plugin 的 webpack 來檢測大小。

REST Client: REST Client 容許你發送 HTTP 請求並在編輯器中直接查看響應結果。

Live Server: 開啓一個本地服務器，能夠爲靜態或者動態頁面提供實時刷新功能。

Code Runner: 在 VS Code 中運行代碼，支持大部分編程語言。

Live Share: 容許你實時共享工做空間：實時編輯、固定並跟隨用戶指針、聯合調試以及其它。這對遠程工做或者異地協同工做頗有用。

JSON to code: 只須要一個命令就能夠將 JSON 轉換爲可用於強類型語言的接口。

Remote SSH: 可使用任何帶有 SSH 服務器的遠程計算機做爲開發環境，從而在各類狀況下極大地簡化開發和故障排查的過程。

React Native/React/Redux snippets for es6/es7: 若是你使用 React 、 React Native 或者 JavaScript，那麼這個擴展頗有用。

個人工做決定我用哪些擴展，因此有的時候我會選擇性地開啓或者關閉一些擴展，從而節省內存使用量。

注意： 此外還有用於其它開發的各類擴展: HTML，CSS，React，React Native，Node，Python 等。每個都有本身對應的擴展。你能夠在 Visual Studio Marketplace 查找各類相關擴展。