ReSharper 8.0 Web Help

Navigation

Navigation commands are available:

  • in ReSharper | Navigate menu
  • on the context menu in the editor
  • on the Navigate To context menu

You can also:

  • navigate from the File Structure window
  • find usages of a symbol

ReSharper helps reveal code structure in countless numbers of code lines.

File Structure helps overview the structure of the current file. ReSharper detects code constructs common for all programming languages as well as some specific constructs for JavaScript, for example, modules. All module members are visible within module only, so the corresponding icon ThemedIcon.ModifiersPrivate.Screen.[SymbolsVs11Gray] is displayed for each member.
ReSharper_by_Language__JavaScript__Navigation__File_Structure__modules
To display anonymous and therefore unnamed functions in the File Structure window, ReSharper retrieves their names from their declarations.
ReSharper_by_Language__JavaScript__Navigation__File_Structure__anonymous_functions
ReSharper takes into account XML documentation comments and extracts useful information. If data types of parameters are not specified explicitly within function signature, you can still see them in the File Structure window because they are specified within XML documentation.
ReSharper_by_Language__JavaScript__Navigation__File_Structure__xml_docs

Also you can navigate to a member declaration by double-clicking the member in the File Structure window.

Go to Declaration - place the caret at the name of a function and navigate directly to the file where the function is declared.
ReSharper_by_Language__JavaScript__Navigation__Go_to_Declaration
If selected item has several declarations, you are prompted to choose one from the drop-down list.
Pay attention that functions declared within paired <script> tags are visible in the current file only.

Go to Usages of Symbol - very useful if you want to find out how many usages of a function are in the whole solution.

ReSharper_by_Language__JavaScript__Navigation__Go_to_Usages_of_Symbol


If you place the caret on a symbol within paired <script> tag and invoke the command, ReSharper will look through the current file only.

Go to File Member - helps you quickly navigate to a desired member within the current file.

ReSharper_by_Language__JavaScript__Navigation__Go_to_File_Member

Search

To find your way around without scanning thousands lines of code, use ReSharper search features. As usual, you can define certain search target and vary its search scope via Find Usages and Find Usages Advanced features.

To find usages of a symbol
  1. Place the caret at the name of a variable or a function.
  2. Do one of the following:
    • On the main menu, choose ReSharper | Find | Find Usages.
    • Click Find Usages on the context menu.
    • Press Alt+F7Ctrl+K,R or Shift+F12.
    If only one usage is found, ReSharper navigates to the usage directly in the editor.
    If several usages are found, the Find Results window opens.

At the screenshot below, you see the differences between Find Usages and Find Usages Advanced.
ReSharper_by_Language__JavaScript__Navigation__Find_Results
To navigate to a usage in source code from the Find Results window, select and double-click the usage.

If you want to see all usages of a symbol in the current file, press Ctrl+Shift+F7Shift+Alt+F11 and highlight usages within this file.
ReSharper_by_Language__JavaScript__Navigation__Highlight_Usages

Sometimes standard search facilities cannot help, especially when you are looking for syntax constructs which are similar but not identical. In such cases the Search and Replace feature is really welcome. To use this feature and bear fruits, make three steps: create placeholders, write a pattern and invoke search process.

First of all you should define placeholders. A placeholder can be one of the following types:

  • Argument - argument(s) in a method invocation
  • Expression - a sequence of operators and operands
  • Name - any symbol identifier
  • Statement - a single-line statement or a block of statements
Detailed instructions on how to create a new placeholder and a pattern are listed in the Creating and Managing Patterns topic.

Let's start with a simple example. All of us are always interested in improving code quality and eliminating possible errors. To handle exceptions, we use the try catch statement, for example. But it's a bad practice to suppress exceptions with empty catch blocks. To find such suspicious spots in sources, the following pattern can be used.
ReSharper_by_Language__JavaScript__Search_with_Pattern
In addition to standard JavaScript language constructs you see three custom placeholders enclosed in $ dollar signs. Every word that is enclosed in dollar signs is treated as a placeholder and displayed to the right of the pattern.

As we are looking for empty catch blocks, the most important condition here is not more than 0 statement. As soon as all conditions are defined, click Find to start the search process.

All results are displayed in the Find Results window. As you can see at the preview, ReSharper has found only those try catch statemants that have empty catch blocks.
ReSharper_by_Language__JavaScript__Navigation__SSR_Results

You can create patterns right from source code. Select a desired code block, then click Find Similar Code on the context menu.