下載Visual Studio
官方網(wǎng)站：https://code.visualstudio.com
github地址 ：https://github.com/Microsoft/vscode
免費(fèi)且基于開(kāi)源。集成的Git，調(diào)試和擴(kuò)展。代碼編輯，重新定義。免費(fèi)的， 建立在開(kāi)源上，無(wú)處不在。
以上是微軟的宣傳標(biāo)語(yǔ)，看的出來(lái)，口號(hào)確實(shí)用了點(diǎn)心：）實(shí)際使用也確實(shí)稱得上‘前端開(kāi)發(fā)利器’。
安裝插件
- 按F1或Ctrl+Shift+p，輸入extensions
- ctrl + P 然后輸入 >ext install
- 點(diǎn)擊左側(cè)‘魔方’圖標(biāo)
實(shí)用插件
Settings Sync
最好用的插件，沒(méi)有之一，一臺(tái)電腦配置好之后，其它的幾臺(tái)電腦都不用配置。新機(jī)器登錄一下就搞定了。再也不用折騰環(huán)境了，使用GitHub Gist同步多臺(tái)計(jì)算機(jī)上的設(shè)置，代碼段，主題，文件圖標(biāo)，啟動(dòng)，鍵綁定，工作區(qū)和擴(kuò)展。Debugger for Chrome
從VS Code調(diào)試在Google Chrome中運(yùn)行的JavaScript代碼。用于在Google Chrome瀏覽器或支持Chrome DevTools協(xié)議的其他目標(biāo)中調(diào)試JavaScript代碼的VS Code擴(kuò)展。beautify
格式化代碼工具
美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代碼。Atuo Rename Tag
修改 html 標(biāo)簽，自動(dòng)幫你完成頭部和尾部閉合標(biāo)簽的同步修改中文（簡(jiǎn)體）語(yǔ)言包
Chinese (Simplified) Language Pack for Visual Studio Code
將界面轉(zhuǎn)換為中文，對(duì)英語(yǔ)不好的人，非常友好。例如我。。。Code Spell Checker
代碼拼寫檢查器一個(gè)與camelCase代碼配合良好的基本拼寫檢查程序。
此拼寫檢查程序的目標(biāo)是幫助捕獲常見(jiàn)的拼寫錯(cuò)誤，同時(shí)保持誤報(bào)數(shù)量較低。vscode-icons
顯示Visual Studio代碼的圖標(biāo)，目前該插件已被vscode內(nèi)部支持："文件" -> "首選項(xiàng)" -> "文件圖標(biāo)主題"guides
顯示代碼對(duì)齊輔助線，很好用Rainbow Brackets
為圓括號(hào)，方括號(hào)和大括號(hào)提供彩虹色。這對(duì)于Lisp或Clojure程序員，當(dāng)然還有JavaScript和其他程序員特別有用。Bracket Pair Colorizer
用于著色匹配括號(hào)Indent-Rainbow
用四種不同顏色交替著色文本前面的縮進(jìn)filesize
在狀態(tài)欄中顯示當(dāng)前文件大小，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時(shí)間Import Cost
對(duì)引入的計(jì)算大小Path Intellisense
可自動(dòng)填充文件名WakaTime
從您的編程活動(dòng)自動(dòng)生成的度量標(biāo)準(zhǔn)，見(jiàn)解和時(shí)間跟蹤。GitLens
git日志查看插件GitLens 增強(qiáng)了 Visual Studio Code 中內(nèi)置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼作者身份，還能通過(guò)強(qiáng)大的比較命令獲得有價(jià)值的見(jiàn)解等等REST Client
REST客戶端允許您直接發(fā)送HTTP請(qǐng)求并在Visual Studio Code中查看響應(yīng)。Npm Intellisense
用于在 import 語(yǔ)句中自動(dòng)填充 npm 模塊require 時(shí)的包提示（最新版的vscode已經(jīng)集成此功能）Azure Storage
VS Code的Azure存儲(chǔ)擴(kuò)展允許您部署靜態(tài)網(wǎng)站并瀏覽Azure Blob容器，文件共享，表和隊(duì)列。按照本教程從VS Code部署Web應(yīng)用程序到Azure存儲(chǔ)。Project Manager
它可以幫助您輕松訪問(wèn)項(xiàng)目，無(wú)論它們位于何處。不要再錯(cuò)過(guò)那些重要的項(xiàng)目了。您可以定義自己的收藏項(xiàng)目，或選擇自動(dòng)檢測(cè)VSCode項(xiàng)目，Git，Mercurial和SVN存儲(chǔ)庫(kù)或任何文件夾。Language Support for Java(TM) by Red Hatredhat.java
這個(gè)插件，這個(gè)下載次數(shù)可觀，安裝就對(duì)了。Todo Tree
此擴(kuò)展可以快速搜索（使用ripgrep）您的工作區(qū)以獲取TODO和FIXME等注釋標(biāo)記，并在資源管理器窗格的樹(shù)視圖中顯示它們。單擊樹(shù)中的TODO將打開(kāi)文件并將光標(biāo)放在包含TODO的行上。找到的TODO也可以在打開(kāi)的文件中突出顯示。
VS code主題推薦
Night Owl
一個(gè)非常適合夜晚工作的 VS Code 主題Atom One Dark Theme
一個(gè)基于Atom的黑暗主題Dracula Official
官方吸血鬼主題，博主用的就是這款，很漂亮One Dark Pro
Atom標(biāo)志性的One Dark主題，也是VS Code下載次數(shù)最多的主題之一！Bimbo
簡(jiǎn)約而現(xiàn)代的神奇海洋主題
代碼語(yǔ)言類輔助插件
HTML Snippets
完整的HTML代碼提示，包括HTML5
HTML CSS Support
在 html 標(biāo)簽上寫class 智能提示css樣式
jQuery Code Snippets
jQuery代碼提示超過(guò)130個(gè)用于JavaScript代碼的jQuery代碼片段。只需鍵入字母'jq'即可獲得所有可用jQuery代碼片段的列表。
HTMLHint
html代碼檢測(cè)，支持html5
C＃
適用于.NET Core的輕量級(jí)開(kāi)發(fā)工具。偉大的C＃編輯支持，包括語(yǔ)法突出顯示，智能感知，轉(zhuǎn)到定義，查找所有引用等。 調(diào)試支持.NET Core（CoreCLR）。
CodeMetrics
計(jì)算TypeScript / JavaScript文件的復(fù)雜性。
