WebStorm 2019.2 Help

Locate duplicates

WebStorm helps you find repetitive blocks of code in a certain set of files by means of the Duplicated code fragment inspection. If you create a duplicate by writing or pasting code, WebStorm highlights it right away and suggests quick-fixes.

To see all duplicates in the selected set of files at once, run the inspection by name.

The inspection works out of the box and has a number of settings that you can change to adjust its behavior.

Configure the inspection

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

    Duplicated Code Fragment inspection settings
  2. Make sure that the necessary inspection profile is selected in the Profile list.

  3. In the search field of the Inspections dialog, type duplicated code fragment to locate the inspection in the list.

    Once you click the inspection, its settings appear on the right.

    • Severity: select a severity level from the list or create a new one.

    • Scope: select the scope of files in which the inspection is going to operate (the code on which the inspection in going to run).

    • Show duplicates from: select the set of files from which duplicates are going to be shown.

      You can restrict the analysis to see duplicates only from the same module or from the same file to avoid false-positive results.

    • Skip duplicates simpler than: configure the size of the code fragment that is compared against the rest of the code in the selected set of files in units.

      The default value is a compromise between accuracy and the amount of found duplicates. Increase the value to get more accurate results. Decrease the value to find more duplicates.

      The exact value of units can be calculated as follows: units = 2 * number of statements + number of expressions.

    • Select the languages for which this inspection is going to work.

  4. Apply the changes and close the dialog.

Ignore names and values while searching for duplicates

For each file type, you can define whether two identical entities that use different names or values should be treated as duplicates.

  1. Click the link in the inspection description, or open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Duplicates.

    Ignore names and values while searching for duplicates
  2. Select the file types to which the analysis should apply and select the checkboxes next to the constructs that you want to anonymize.

    function multiply(a, b) { return (a * b); } function multiplication(c, d) { return (c * d); }

  3. Apply the changes and close the dialog.

The dialog also allows you to completely exclude a language from the analysis and indexing. If you disable a language on this page, this language will be hidden in the inspection settings.

Search for duplicates manually (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.

Last modified: 17 September 2019

See Also