TechBubbles Microsoft Technology BLOG

What is new in Web Extension Pack?

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.

image

image

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.

image

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

image

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.

Browser Sync demo

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.

image

the output window shows the detailed information on optimization process

image

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

image

image

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

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…”

image

select the package manager that you want to use

image

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.

options.png

more information on additional packages can be found here

About the author

Kalyan Bandarupalli

My name is kalyan, I am a software architect and builds the applications using Microsoft .NET technologies. Here I am trying to share what I feel and what I think with whoever comes along wandering to Internet home of mine.I hope that this page and its contents will speak for me and that is the reason I am not going to say anything specially about my self here.

Add Comment

TechBubbles Microsoft Technology BLOG

Follow me

Archives

Tag Cloud