Web Extension Pack is set of extensions that helps you to become more productive in web development. Mads Kristensen has demoed the web extension pack features on channel 9.
There are quite a number of extensions available for web developers in visual studio gallery but finding these extensions is little difficult without knowing they exist, what if you have a extension pack that will install everything for you. Download this extension pack from here. If any new extension is created then visual studio web team adds this extension automatically for you.
The following are some interesting extensions that are included in the pack
Add New File
Using Add New File extension you can easily add any file with any extension. Shift + F2 is the short cut for creating a new file in selected folder.
It also creates folder when you enter a name ending with a /.
Browser reload on save
Using this extension you can leverage browser-link to reload all connected browsers when files are saved in visual studio. note: browser-link is not an extension it is visual studio feature.
once you check this option then every time whenever you save file in project , all the connected browsers will be reloaded. enabling or disabling this option can be done using tools –> options –> web –> browser reload on save
Browser Sync extension
Using this extension you can leverage browser-link to synchronize the navigation and scroll position. This extension supports all browsers and emulators. if you navigate to one of the browsers that opened on your machine and hit CTRL + ALT + ENTER it will sync your action to all opened browsers.
Image Optimizer
using this extension you can optimize any JPEG, PNG and GIFS. It can do both lossy and lossless optimization. To optimize the images in your project, right click on folder containing images and select the option as shown in following image. lossless optimization doesn’t change the quality of the image where lossy optimization scarifies some quality of the image which you can not notice with human eye.
the output window shows the detailed information on optimization process
Web Analyzer
Using this extension you can do static code analysis on JavaScript, TypeScript, Coffee Script, CSS etc. It runs when a files is saved. It can run on single file or entire project.You can change the rules in configuration files to run in your project.This extension gives you the linting support to your project. Linting is basically both foxcop and stylecop. You can open these lint setting files using tools –> Web Analyzer
0 is for turning of the rule, 1 is for warning and 2 is for showing the error. You can disable the linters using Tools –> options
Package Installer
Using this extension you can easily install Bower, npm and NuGet packages. It works for all project types including asp.net 5. It automatically creates the package files if they are missing. To install a package simply right-click on project and say “Quick Install Package…â€
select the package manager that you want to use
you will get the auto completion for all package names and also for version numbers. You can also specify custom arguments to the package manager that support it.
more information on additional packages can be found here
