Code Analysis and Coding Assistance

Syntax Highlighting

ReSharper 6 supports coloring identifiers in JavaScript as well. You can establish a custom font and color scheme, for more information, see Configuring Syntax Highlighting Fonts and Colors.

Default syntax highlighting for JavaScript:

Code Highlighting

To look through the list of available inspections for JavaScript, choose ReSharper | Options | Code Inspections | Inspection Severity, then click the JS tab.

Each inspection has one of the 5 severity levels:

• error
• warning
• suggestion
• hint
• do not show

By default all inspections for JavaScript are shown as warnings.

To find out whether the opened file contains errors or warnings, look at the Status Indicator, a small colored box at the top of the Marker Bar. Place the mouse pointer over the Status Indicator and look at the tooltip:

After you get the summary information, you can concentrate on concrete problems. Choose one of the yellow markers and place the mouse pointer over it and get a tip about the chosen warning. Click the marker to navigate directly to the code line.

As you see parameter context is displayed in grey:

At any time you can change the severity level of an inspection. The visual representation of the inspection changes correspondingly. For detailed instructions, see Configuring ReSharper Inspections. So, the parameter is highlighted with a curly red underline now:

Code Completion

Code Completion features help you write code faster. While you type, ReSharper analyses surrounding context and symbols you recently entered in order to suggest suitable values gathered in completion list.

To learn more about Symbol Completion, see Symbol Completion.

Suggesting variable names
After a variable is declared, it is included in the completion list and can be suggested by ReSharper.

Suggesting JavaScript built-in methods
ReSharper knows and can suggest core predefined JavaScript methods and properties, such as method 'split' for a string:

Suggesting user-defined methods
It also can suggest methods defined by you somewhere in your solution.

Suggesting methods and properties for DOM elements
When you're working with DOM elements, ReSharper will include corresponding methods and properties in the completion list.

Suggesting properties
Suggesting user-defined properties or standard ones (for example, DHTML properties).

Examples of Quick-Fixes

Create from usage
When ReSharper detects a variable, that has not been declared, use this quick-fix to add variable declaration.

As a result, a variable declaration is added

and you can fill the initial value for the variable

Terminate all unterminated statements in file
Use this quick-fix in order to terminate all unterminated JavaScript statements in current file.

Specify qualifier explicitly
In case an explicit quialifier is missing, use this quick-fix to add a qualifier.

Remove parameter
If a parameter is not used inside function body, this quick-fix will remove the parameter from function declaration

Declare local variable
When ReSharper finds out that a variable has been assigned without being declared, use this quick-fix to transform the assignment into a variable declaration.

After applying this quick-fix the statement is a proper variable declaration.

Examples of Context Actions

Reverse assignment
If you want to quickly swap the left part and the right part of an assignment, you can use this context action.


As a result, evt is assigned to window.event

Remove braces
When braces are unnecessary, for instance when a block contains only a single statement, this context action can remove both the opening and closing braces and fix indentation.

As a result, both the opening and closing braces are removed.

Split declaration and assignment
Sometimes you may need to split a variable declaration and an assignment. In this case, Split declaration and assignment context action can help.

As a result, the declaration of formObj is a separate statement which can be subsequently refactored.

Split into separate declarations
Also, you may want to split a multiple declaration statement into several separate declarations. Use this context action for this purpose.

As a result, each declaration is a separate statement.

Rearrange Code

ReSharper enables you to move elements in JavaScript code. You can move:

• Statements
• Parameters/Arguments
• Literal object properties
• Array elements

Study algorithms and examples below.

Look at the example below. To move the statement, that checks whether evt is null or not, up, press Ctrl+Shift+Alt+Up.

In the example below, the variable contact is initialized to be an object with three properties. The PhoneNumbers property is an array that consists of literal objects. Depending on the caret position the PhoneNumbers property or the whole initialization statement can be moved:

Another opportunity is to rearrange the elements of the array or the whole initialization statement:

Moreover, you can move properties within an object that is an array element (the Location property for a example) or the whole initialization statement.

In all cases, ReSharper informs you about moving directions.