本文將介紹一些作者推薦的適用於Visual Studio 2017的常用擴展插件
1.Web Essentials 2017
Web開發基礎 - 核心插件
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack2017
官方文檔>>https://github.com/madskristensen/WebEssentials2017
該插件為后續幾個插件的前置插件
2.Bundler & Minifier
Web開發基礎 - js/css合並壓縮器
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier
官方文檔>>https://github.com/madskristensen/BundlerMinifier
該插件提供了js/css代碼的壓縮與合並功能
如上圖所示，在需要壓縮的文件上右鍵，選擇【Bundler & Minifier】-【Minify File】，即可壓縮文件，插件會自動在該文件的子級生成一個新的帶".min"的文件
另外，還可以使用Bundle功能將多個文件合並成一個
選中要合並的文件，點擊右鍵，選擇【Bundler & Minifier】-【Bundle and Minify Files】
插件會根據設置把選中的文件的內容合並到一個新的文件中
- 插件會在源文件被修改（並保存）后實時更新壓縮或合並后的文件
- 插件會根據根目錄的bundleconfig.json來執行動作，用戶可自行修改該配置文件以改變插件的動作
3.Web Compiler
Web開發基礎 - less編譯器
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler
官方文檔>>https://github.com/madskristensen/WebCompiler
該插件提供了less文件編譯功能
如上圖所示，在需要編譯的less文件上右鍵，選擇【Web Compiler】-【Compile File】，即可編譯文件，插件會自動在該文件的子級生成一個未壓縮的".css"文件和一個已壓縮的".min.css"的文件
- 插件會在源文件被修改（並保存）后實時更新編譯后的文件
- 插件會根據根目錄的compilerconfig.json來執行動作，用戶可自行修改該配置文件以改變插件的動作
可以在compilerconfig.json中添加上圖的代碼讓插件在執行編譯時不生成壓縮文件
4.HTML Tools
Web開發基礎 - HTML輔助工具
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.HtmlTools
官方文檔>>https://github.com/madskristensen/HtmlTools
該插件提供了一些HTML語言編程輔助，例如將鼠標移到一個img標簽的src屬性上，可以立即預覽圖片
5.CSS Tools
Web開發基礎 - CSS輔助工具
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.CSSTools
官方文檔>>https://github.com/madskristensen/CssTools
該插件提供了一些CSS語言編程輔助，例如顯示顏色、預覽字體、預覽圖片等
6.File Icons
Web開發基礎 - 常見文件類型圖標
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.FileIcons
官方文檔>>https://github.com/madskristensen/FileIcons
該插件提供了一系列Web開發中常見的文件類型的圖標
7.File Nesting
Web開發基礎 - 文件內嵌
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.FileNesting
官方文檔>>https://github.com/madskristensen/FileNesting
該插件提供了文件內嵌功能，允許用戶將一個文件內嵌到另一個文件的子級，並允許取消內嵌
如上圖所示，在想要被內嵌的文件上右鍵，選擇【File Nesting】-【Nest item】，選擇要內嵌到的目標文件，即可將當前文件內嵌到目標文件的子級
8.Image Optimizer
Web開發基礎 - 圖片處理
下載地址>>https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ImageOptimizer
官方文檔>>https://github.com/madskristensen/ImageOptimizer
該插件提供了圖片相關操作的功能，例如可以右鍵一張圖片可以選擇復制該圖片的base64數據到剪貼板
9.Devart T4 Editor
T4模板編輯器
下載地址>>https://marketplace.visualstudio.com/items?itemName=DevartSoftware.DevartT4EditorforVisualStudio
提供了T4模板文件（后綴名為.tt）的編輯功能
什么是T4模板？自行百度^_^
10.Code Compare
代碼比較器
下載地址>>https://www.devart.com/codecompare/download.html#anchorDowload
提供了文件比較功能
可以快速比較兩個文件的代碼差異，且不單限於VS使用，插件還提供Windows資源管理器集成，安裝后可以直接在Windows文件夾里任意比較文件