Tips & Tricks for ASP.NET, IIS, and Visual Web Developer : Editor

Tip#66: Did you know... how to insert quotes values automatically while typing the attrib values?

WebDevTools — Sat, 30 May 2009 02:53:34 GMT

It's a nice time saver if you would like the HTML editor to automatically add quotes for the attribute values while you are typing.

To set this option select Tools->Options. Check Show all settings. From the left pane select Text Editor -> HTML -> Format and check the insert attribute value quotes when typing checkbox.

Now as soon as you hit "=" for the attrib value, editor will insert a pair of quotes and show the intellisense for the values accepted.

Select a value from the intellisense and press enter/tab. Cursor would jump out of the pair of quotes (you will have to hit the arrow key after entering the attrib value, if it doesn't show up a list of values).

Deepak Verma
SDET | Visual Web Developer

Tip #59: Did you know…How you can automatically format unformatted HTML on paste in VS?

WebDevTools — Wed, 29 Apr 2009 23:36:04 GMT

Do you copy/ paste a lot of unformatted HTML content in to your web forms? Do you always format HTML after pasting such content? There is an easy way to automatically format HTML on paste in VS. Here is how you do it.

In Tools->Options dialog, go to Text Editor->HTML->Miscellaneous page. Check ‘Format HTML on paste’ option.

After checking this option on, whenever you paste unformatted HTML, it gets formatted automatically.

Ranjini Mathrubootham

SDET, Visual Web Developer

Tip #58: Did you know…How you can import/ export HTML Per Tag options in VS?

WebDevTools — Wed, 29 Apr 2009 05:38:25 GMT

If you make a lot of customization to per tag options and you want import/ export these settings you could easily do so with Tools->Import/Export Settings dialog.

To export your custom settings to a vssettings file, launch Import and Export Settings Wizard from the menu by choosing Tools->Import/Export Settings. Click ‘Next’

In the next page of the dialog, uncheck ‘All Settings’. Expand Options->Text Editor node. Check ‘HTML Tag Specific’ checkbox as shown below

Click ‘Next’. You can change the location and filename to save the settings file to. Enter the location and name and click Finish.

You can Import these settings by using the same Import/Export Settings wizard and choosing the ‘Import Selected Environment Settings’ option in the first screen.

Ranjini Mathrubootham

SDET, Visual Web Developer

Tip #54: Did you know…How you can turn off intellisense for HTML/ CSS editors

WebDevTools — Sat, 25 Apr 2009 01:18:43 GMT

If you would like turn off intellisense in HTML editors (aspx, html files) and CSS editor (css files), you could do so by going to Tools->Options dialog.

For HTML editor, go to Tools->Options->HTML->General. In the right pane, under Statement Completion, uncheck "Auto list members"

For CSS Editor, go to Tools->Options->Text Editor->CSS->General. In the right pane, under Statement Completion, uncheck “Auto list members”

Ranjini Mathrubootham

SDET, Visual Web Developer

Tip #49 Did you know… how to set the editor to always place open braces on new line for functions in JScript?

WebDevTools — Tue, 31 Mar 2009 00:24:01 GMT

In Visual Studio, click Tools -> Options. In the Options dialog on the left pane select Text editor -> JScript -> Formatting.

Check Place open brace on new line for functions.

Deepak Verma
SDET | Visual Web Developer

Tip #37: Did you know…How to organize usings?

WebDevTools — Sun, 28 Dec 2008 10:28:52 GMT

Overtime C# source code files may have unnecessary & unorganized using directives. Visual Studio IDE organize using options can help you to unclutter the source code.

To organize the C# code right click anywhere inside the code editor, select Organize usings.

Select Remove Unused Usings to remove any using directives that are not used in the source code (this may remove some required using directives if the source code doesn't build)
Select Sort Usings to organize alphabetically the using directives (by default directives that begin with System comes before other using directives)
Select remove and Sort to perform both of the above operations

Thanks,
Deepak Verma
SDET | Visual Web Developer

Tip #28 Did you know… That “Go to definition” is supported for CSS Class?

WebDevTools — Wed, 26 Nov 2008 00:15:36 GMT

If you have a style defined as Class = ”fooRed” as shown below and want to quickly know what does fooRed style contain?

 <div class ="fooRed">
    In RED
 </div>

Just place your cursor on fooRed and hit the F12 button. This will highlight the CSS class for you even if the class lives in the Current Page or in an External style sheet.

F12 is the short cut you can use instead of, Right Clicking fooRed and selecting “Go to Definition” action in the context menu as shown in the picture below.

So, when you hit F12, the class is highlighted as shown below.

This way you can get to style definition with just one key –>F12

Reshmi Mangalore

SDET, Visual Web Developer

Tip #24: Did you know…You could display CSS/HTML errors as warnings or as errors?

WebDevTools — Sat, 15 Nov 2008 04:22:25 GMT

VS 2008 has this cool feature of downgrading any CSS/HTML errors to warnings. This is helpful when you want to separate out validation errors and are looking for what is actually stopping your build.

In VS 2008 the default behavior is to display any HTML/CSS errors as warnings as shown in the picture below. Note that warnings have a green squiggle.

The settings for this feature is available under Tools –>Options –>Text Editor –>HTML->Validation as shown below.

If you still want your CSS/HTML errors to show up as errors you can uncheck the as warnings (HTML, CSS) check box. By doing this, VS will display it as errors as shown below. Note that error have a red squiggle as shown below.

Reshmi Mangalore

SDET, Visual Web Developer

Tip #23: Did you know…How to launch Formatting options dialog for editor with 2 clicks?

WebDevTools — Wed, 12 Nov 2008 23:12:23 GMT

Normally we use Tools->Options->Text Editor->HTML->Format to launch the Formatting Options dialog shown below:

You can also launch the above dialog from the editor surface with just 2 clicks. On the editor surface, right-click and choose 'Formatting and Validation' from the context menu.

Voila! You get the Formatting Options dialog shown above.

Ranjini

SDET | Visual Web Developer Team