Intellisense

Introduction

IntelliSense is the general term used to refer to a number of features found in Visual Studio: List Members, Parameter Info, Quick Info, and Complete Word. These features help you to learn more about the code you are using, keep track of the parameters you are typing, and add calls to properties and methods with only a few keystrokes. Figure 1 shows the IntelliSense menu options and their keyboard shortcuts. You will find the IntelliSense menu option at the bottom of the Edit menu.

Image of the options on the Edit-->IntelliSense menu.
Figure 1: The list of options found on the Edit-->IntelliSense menu.

IntelliSense Features

List Members

List Members is an IntelliSense feature whereby when you type a trigger character in any of the Visual Studio code editors, a list will appear displaying valid members for the type (or namespace) you are typing. In the case of VSEW this means you have List Members support for HTML (including HTML5), CSS (including CSS3), JavaScript, ASP.NET, C#, SQL, or Visual Basic.

Keyboard shortcut: Ctrl + J.

Once item is selected press Tab or Spacebar on your keyboard to insert the code. You can use Page Up or Page Down on your keyboard to scroll through long member lists.

To turn List Members off by default (so that it does not appear unless specifically invoked), go to Tools/Options/All Languages and deselect Auto list members. If you want to turn off List Members only for a specific language, go to the General settings for that language.

You can also change to suggestion mode, in which only the text you type is inserted into the code. For example, if you enter an identifier that is not in the list and press TAB, in completion mode the entry would replace the typed identifier. To toggle between completion mode and suggestion mode, press CTRL+ALT+SPACEBAR or click Edit/IntelliSense/Toggle Completion Mode.

Parameter Info

Image of IntelliSense displaying parameter information.
Figure 2: In the CSS editor Parameter Info provides the list of values the property will accept.

Parameter Info gives you information about the number, names, and types of parameters required by a method, attribute generic type parameter (in C#), or template (in C++).

The parameter in bold indicates the next parameter that is required as you type.

Quick Info

Image of Intellisense Quick Info box.
Figure 3: The IntelliSense Members list with Quick Info displayed for the selected member in the list.

Quick Info does just that, it provides quick info about a selected member in  a list as shown in figure 1.

Keyboard shortcut: Ctrl + I.

Image of the Intellisense Quick Info box.
Figure 4: The Intellisense Parameter Info bar with Quick Info displayed for the selected member of the bar.

Complete Word

Complete Word completes the rest of a variable, command, or function name once you have entered enough characters to disambiguate the term. You can invoke Complete Word by clicking Edit/IntelliSense/Complete Word, typing CTRL+SPACE, or clicking the Complete Word button on the editor toolbar.

Code Snippets

Code Snippets is a very cool feature of Visual Studio, it allows you to quickly pastes blocks of code into your source documents at your request and the snippets themselves are built in such a way as to expedite completion of the entire snippet of code.

Insert Code Snippet

One way to add a snippet of code is to insert it in one of Visual Studios code editors. Click in the Source code, then press Ctrl+K followed by Ctrl+X on your keyboard, this will open the Insert Snippet box which will allow you to select a code snippet for any of the languages you have available to the document you are editing. Open one of the language folders and select from the choices that appear.

Image of the Insert Code Snippet menu.
Figure 4: After typing Ctrl+K, Crtl+X the Insert Snippet: box appears listing your language choices as folders.

Code Completion

One way to insert a snippet is to type the keyword associated with the snippet and then press the Tab key on the keyboard. In figure 5 you see the keyword style type into the head section of an HTML document. In figure 6 you see the results after the Tab key is pressed - a completely formed HTML <style> element was created by Visual Studio. The same is true of code snippets like <audio>, the entire element block is created.

Image of the first step in the code snippet process.
Figure 5: After typing a keyword like prop or style, press the Tab key on your keyboard.
Image of the first step in the code snippet process.
Figure 6: Shows the results of typing the keyword style and then pressing Tab key on the keyboard.

Surround With Code Snippet

In order to quickly convert text to any HTML element, you can simply select the block of text and then surround it with a code snippet by typing the key sequence Ctrl+K, Ctrl+S on your keyboard. This will bring up the Surround With: box with a Members List attached to it (as shown in figures 7 & 8). At this point you have several choices, you can type a letter that matches an item in the Member's List (in the figure 9 example that would be an a for ASP.NET or an h for HTML), use the arrow keys on your keyboard to navigate to a folder in the Member's List, or use your mouse to click on one of the folders in the member's list. Then press the Enter key on your keyboard to open the selected folder or double-click the folder. Then use the same methods just describe to select a code snippet and press Enter or double click on it to insert the code.

Once the code is inserted into your document, some of them require you to type additional information to complete the process. For example, in the case the audio HTML element there are two src attributes that need values assigned to them. Once you insert the code snippet for the audio block you will notice that the file name of the first source element's src attribute is highlighted. All you have to do is type the actual name of the image file and press the Enter key. Visual Studio assigns the same file name to the second source element's src attribute and places your insertion point at the end of the audio element's block of code. A real time-saving feature once you get used to using it.

Image of the first step in the code snippet process.
Figure 7: After typing Ctrl+K, Crtl+S the Surround With: box appears listing your language choices as folders.
Image of the first step in the code snippet process.
Figure 8: The HTML folder being selected from the list of language options.
Image of the first step in the code snippet process.
Figure 9: The <audio> element is selected from the list of <HTML> element options that appear.
Image of the first step in the code snippet process.
Figure 10: The <audio> element code block is typed out by Intellisense and the filename is selected.
Image of the first step in the code snippet process.
Figure 11: song1 is typed by the user as a replacement for the default file name text and by pressing the Tab key the next file name is selected.
Image of the first step in the code snippet process.
Figure 12: The second file name default text is replaced by the user typing song1.

Help With Code Snippets

MSDN: How to Use Surround-with Code Snippets

IntelliSense Icons (Babels)

When an IntelliSense context menu pops up with its list of options you'll notice that many of the options have icons identifying the option type. Keeping track what icons represent what can be confusing. Here is a good table for reference.

Icon Description Icon Description
Variables Symbol

Variables

 Declaration Symbol

Method or Function
Fields

Fields

 Operator Symbol

Files
Type parameters

Type parameters

 Property Symbol

Folders
Structure Symbol

Constants

 Field Icon

Colors
Union Symbol

Classes

 Event Symbol

Unit
Enumeration Symbol

Interfaces

 Constant Icon

Snippet prefixes
Type Definition Symbol

Structures

 Enumerate Item Symbol

Words
Visual Studio Module Symbol

Events

 Map Item Symbol

Keywords
Extension Method Symbol

Modules

 Declaration Symbol

References
Delegate Symbol

Properties & Atrributes

 Error Icon for Class View and Object Browser

Values & Enumerations
Type Forwarding Symbol

Keywords

 Code Snippet icon.

Code Snippet, vendor-specific properties in CSS editor.

Goto https://code.visualstudio.com/docs/editor/intellisense for the most up-to-date information.

Smart Tags

Keyboard shortcut = Ctrl + . (period)

 Smart tag is the blue littl box that appears under the beginning of a word in Visual Studio editors and presents a menu when the user clicks on it or presse Ctrl + period.

Peek View

Keyboard shortcut = Alt + F12

Peek view let's you view class descriptions while editing other classes.