ReSharper Web Help

Syntax highlighting

Since ReSharper 6.0 coloring identifiers in JavaScript is supported as well. You can establish a custom font and color scheme, for more information, see Configuring Syntax Highlighting.

Default syntax highlighting for JavaScript:

ReSharper_by_Language__JavaScript__Highlighting__Syntax_highlighting

Code highlighting

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

ReSharper_by_Language__JavaScript__Highlighting__Inspection_Severity

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:

ReSharper_by_Language__JavaScript__Highlighting__Status_indicator

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.

ReSharper_by_Language__JavaScript__Highlighting__Marker

As you see parameter context is displayed in grey:

ReSharper_by_Language__JavaScript__Highlighting__Code_highlighting_01

ReSharper_by_Language__JavaScript__Highlighting__Code_highlighting_02

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 Code Inspection Settings. So, the parameter is highlighted with a curly red underline now:

ReSharper_by_Language__JavaScript__Highlighting__Code_highlighting_03

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 Basic Completion, see Basic Completion.

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

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

ReSharper_by_Language__JavaScript__Code_Completion_05

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

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.

ReSharper_by_Language__JavaScript__Code_Completion_04

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

ReSharper_by_Language__JavaScript__Code_Completion_01

Examples of quick-fixes

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

ReSharper_by_Language__JavaScript__Quick-Fixes__terminate_unterminated_statements_01

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

ReSharper_by_Language__JavaScript__Quick-Fixes__specify_qualifier_explicitly_01

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

ReSharper_by_Language__JavaScript__Quick-Fixes__remove_parameter_01

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.

ReSharper_by_Language__JavaScript__Quick-Fixes__declare_local_variable_01

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

ReSharper_by_Language__JavaScript__Quick-Fixes__declare_local_variable_02

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.

ReSharper_by_Language__JavaScript__Context_Actions__reverse_assignment_01

As a result, evt is assigned to window.event

ReSharper_by_Language__JavaScript__Context_Actions__reverse_assignment_02

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.

ReSharper_by_Language__JavaScript__Context_Actions__remove_braces_01

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

ReSharper_by_Language__JavaScript__Context_Actions__remove_braces_02

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

ReSharper_by_Language__JavaScript__Context_Actions__create_from_usage_01

As a result, a variable declaration is added

ReSharper_by_Language__JavaScript__Context_Actions__create_from_usage_02

and you can fill the initial value for the variable

ReSharper_by_Language__JavaScript__Context_Actions__create_from_usage_03

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.

ReSharper_by_Language__JavaScript__Context_Actions__split_01

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

ReSharper_by_Language__JavaScript__Context_Actions__split_02

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.

ReSharper_by_Language__JavaScript__Context_Actions__split_into_separate_declarations_01

As a result, each declaration is a separate statement.

ReSharper_by_Language__JavaScript__Context_Actions__split_into_separate_declarations_02

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.

To move a statement up or down
  1. Place the caret at a statement.
  2. Do one of the following:
    • On the main menu, choose ReSharper | Edit | Rearrange Code | Move Up or ReSharper | Edit | Rearrange Code | Move Down.
    • Press Ctrl+Shift+Alt+UpCtrl+Shift+Alt+Up or Ctrl+Shift+Alt+DownCtrl+Shift+Alt+Down.

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

ReSharper_by_Language__JavaScript__Moving_Code_Elements_01

ReSharper_by_Language__JavaScript__Moving_Code_Elements_02

To move a statement out of or inside a block of code
  1. Place the caret at a statement.
  2. Do one of the following:
    • On the main menu, choose ReSharper | Edit | Rearrange Code | Left or ReSharper | Edit | Rearrange Code | Move Right.
    • Press Ctrl+Shift+Alt+LeftCtrl+Shift+Alt+Left or Ctrl+Shift+Alt+RightCtrl+Shift+Alt+Right.

ReSharper_by_Language__JavaScript__Moving_Code_Elements_03

ReSharper_by_Language__JavaScript__Moving_Code_Elements_04

To move a property of a literal object
  1. Place the caret at a property.
  2. Do one of the following:
    • On the main menu, choose ReSharper | Edit | Rearrange Code | Left or ReSharper | Edit | Rearrange Code | Move Right.
    • Press Ctrl+Shift+Alt+LeftCtrl+Shift+Alt+Left or Ctrl+Shift+Alt+RightCtrl+Shift+Alt+Right.

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:

ReSharper_by_Language__JavaScript__Moving_Code_Elements_06

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

ReSharper_by_Language__JavaScript__Moving_Code_Elements_07

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

ReSharper_by_Language__JavaScript__Moving_Code_Elements_05

In all cases, ReSharper informs you about moving directions.

See Also

Procedures: