WebStorm 2019.2 Help

Locate duplicates

WebStorm helps you find repetitive blocks of code in a certain range. This range can be a single file, a project, or a custom scope. Analysis results are displayed in the dedicated tab of the Duplicates tool window.

Detect duplicates on the fly

WebStorm enables spotting duplicates on the fly. The analysis is performed by means of the Duplicated code fragment inspection, which you can find under the General node of the Editor | Inspections page of the Settings/Preferences dialog (Ctrl+Alt+S).

If you stumble upon an existing duplicate or somehow create one by writing or pasting code, WebStorm reports a problem and suggests quick-fixes that let you navigate to the detected duplicates, or view all of them in the Duplicates tool window.

Detecting duplicates on-fly

Manually search for duplicates (deprecated)

  1. From the main menu, select Code | Locate Duplicates.

  2. In the Specify Code Duplication Analysis Scope dialog, specify the analysis scope: whole project, current file, uncommitted files (for the projects under version control), or some custom scope. In addition, you can include test sources into the analysis, too.

  3. In the Code Duplication Analysis Settings dialog, select the languages that you want to analyze.

    For each language, check the options to define the analysis preferences. For example, you can opt to request identical match for code fragments to be considered duplicates, or specify a certain limit below which the code constructs are not considered duplicates (for example, to avoid reporting each if construct in the source code).

  4. In the Duplicates tool window, explore the analysis results.

    Duplicates tool window
    • View the list of duplicates in the left pane of the tool window.

    • View the differences between the found duplicates in the right pane. Use the arrow buttons to place the selected duplicate in one of the sections of the differences viewer and compare fragments of the code.

    • Navigate to the duplicates in the editor by using the Jump to Source or Show Source context menu commands.

    • Eliminate duplicates from the source code by applying the Extract Method in JavaScript or Extract Method in Typescript refactoring to the detected repetitive blocks of code that are found and highlighted automatically.

Configure duplicates analysis

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Duplicates.

  2. On the Duplicates page that opens, select the file types, to which duplicates analysis should apply. Additionally, select the Variable or identifier names/Function or field names/Constant values checkboxes to define whether two identical entities that use different names should be treated as duplicates.

    For example, if the Variable or identifier names and Function or field names are enabled, the following two functions will be considered duplicate:

    function multiply(a, b) { return (a * b); } function multiplication(c, d) { return (c * d); }
  3. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Inspections and select the Duplicated code fragment inspection under the General node.

  4. In the inspection options, select whether you want to view duplicates only within the same file or across the entire project. In the Do not show duplicates simpler than field for the necessary file type, set the size of duplicated language constructs to be detected. In the JavaScript context, the constructs less than 45 units are ignored by default. Alter the number of units to enable duplicate detection for smaller code fragments.

    Duplicated Code Fragment inspection settings
Last modified: 23 August 2019

See Also