Write and edit source code

• To add a line after the current one, press . WebStorm moves the caret to the next line.

• To add a line before the current one, press . WebStorm moves the caret to the previous line.

• To duplicate a line, press .

• To sort lines alphabetically in the whole file or in a code selection, go to Edit | Sort Lines or Edit | Reverse Lines. These actions might be helpful when you work with property files, data sets, text files, log files, and so on. If you need to assign shortcuts to those actions, refer to Configure keyboard shortcuts for more information.

• To delete a line, place the caret at the line you need and press .

• To join lines, place the caret at the line to which you want to join the other lines and press . Keep pressing the keys until all the needed elements are joined.

  You can also join string literals, a field or variable declaration, and a statement. Note that WebStorm checks the code style settings and eliminates unwanted spaces and redundant characters.

• To split string literals into two parts, press .

  WebStorm splits the string and provides the correct syntax. You can also use the Break string on '\n' intention to split string literals. Press or click to select this intention.

  WebStorm also offers a set of handy intention actions for manipulating string literals, such as replacing a string with a template string or replacing a nested call with a pipe expression. To view the available actions, place the caret inside the string literal and press or click .

  

  Gif

• To comment a line of code, place the caret at the appropriate line and press . Press again on the same line to uncomment it.

• To move a line up or down, press or respectively.

• To move (swap) an XML or HTML tag attribute to the left or to the right, place the caret at it, or select it and press for left or for right.

  

  Gif

• When you copy () or cut () a line without any code selected, the paste action will add the contents of the clipboard to above the current line, not at your caret.

  If you want to paste your copied code at the caret, select the Paste at the caret position option in the advanced settings.

• Place the caret at a line or a symbol, right-click to open the context menu, select Copy/Paste Special | Copy Reference. When you select the Copy Reference () option, WebStorm creates a reference string that includes the line number of the selected line or symbol. You can press to paste the copied reference anywhere.

• WebStorm keeps track of everything you copy to the clipboard. To paste from history, in the editor, from the context menu, select Copy/Paste Special | Paste from History (). In the dialog that opens, select your entry and click Paste.

  tip

  The default number of items stored in the clipboard history is 100.

• When you copy and paste code to the editor, WebStorm displays the hidden (special) characters represented by their Unicode name abbreviation.

• In the editor, place the caret at the item you want to select and press / to extend or shrink your selection.

  In a JavaScript file, if you start by selecting an argument in a method call, it will extend to all arguments, then to the whole method, then to the expression containing this method, then to a larger block of expressions, and so on.

  

  Gif

• If you need just to highlight your braces, place the caret immediately after the block closing brace/bracket or before the block opening brace/bracket.

1. In the Settings dialog () , go to Editor | General | Smart Keys.

2. Select the Use "CamelHumps" words checkbox.

If you want to use double-click when selecting according to capitalization, make sure that the Honor "CamelHumps" words settings when selecting on double click checkbox right below is selected.

• In the editor, place the caret at the needed statement and press to move a statement up or to move a statement down. WebStorm moves the selected statement performing a syntax check.

note

If moving of the statement is not allowed in the current context, the actions will be disabled.

• Select the relevant suggestion for completion and press . WebStorm completes the statement, automatically adds a semicolon at the end of it, and moves the caret at the position where you can start typing a new statement.

  

  Gif

1. Place the caret at the expression you want to remove or unwrap.

2. Press .

   WebStorm shows a popup with all actions available in the current context. To make it easier to distinguish between statements to be extracted and statements to be removed, WebStorm uses different background colors.

   

   Gif

3. Select an action and press .

• Move and copy code fragments by dragging them in the editor.

  • To move a code fragment, select it and drag the selection to the target location.

  • To copy a code selection, keeping pressed, drag it to the target location.

    note

    The copy action might not be available in macOS since it can conflict with global OS shortcuts.

  The drag functionality is enabled by default. To disable it, in the Settings dialog () , go to Editor | General and clear the Move code fragments with drag-and-drop checkbox in the Mouse Control section.

• To toggle between the upper and lower case for the selected code fragment, press .

  Note that when you apply the toggle case action to the CamelCase name format, WebStorm converts the name to the lower case.

• To comment or uncomment a code fragment, select it and press .

  By default, when you enclose a code fragment in a block comment, the text starts right after the opening /* characters without any spaces. Before the closing */ characters no space is inserted either.

  This default code style may conflict with some linters' rules, for example, ESLint. To improve the code style, configure enclosing block comments in leading and trailing spaces.

  In the Settings dialog () , go to Editor | Code Style | JavaScript or Editor | Code Style | TypeScript, open the Code Generation tab, and configure the spaces and formatting in the Comments area.

1. Open the Settings dialog () and go to Editor | Inlay Hints.

2. Expand <required language> under Parameter names.

3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

   The preview shows how the changes you make in the settings affect the code appearance.

4. For some methods and functions, WebStorm does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

• To fold or unfold a code fragment, press /. WebStorm folds or unfolds the current code fragment, for example, a single method.

• To collapse or expand all code fragments, press /.

  WebStorm collapses or expands all fragments within the selection, or, if nothing is selected, all fragments in the current file, for example, all methods in a file.

• To collapse or expand code recursively, press /. WebStorm collapses or expands the current fragment and all its subordinate regions within that fragment.

• To fold a block of code inside a pair of matching curly braces {}, press . To expand the block, press .

• To collapse or expand doc comments in the current file, in the main menu select Code | Folding | Expand doc comments/Collapse doc comments.

• To collapse or expand a custom code fragment, select it and press . Alternatively, mark the code fragment as Custom folding region.

  You can fold or unfold any manually selected regions in code.

• To expand the current fragment and all the nested fragments, press . You can expand the current fragment up to the specified nesting level (from 1 to 5).

• To expand all the collapsed fragments in the file, press . You can expand the collapsed fragments up to the specified nesting level (from 1 to 5).

You can make any code fragment foldable by marking it as custom folding region with dedicated comments. After that, you can expand and collapse the fragment with or have it collapsed automatically on opening the file.

Gif

1. In the editor, select a code fragment and press .

2. From the popup menu, select <editor-fold...> Comments or region...endregion Comments.

   editor-fold style

   region... endregion style

   //<editor-fold desc="First Names">
   const John = firstNames[0];
   const James = firstNames[1];
   const Nick = firstNames[2];
   const Ann = firstNames[3];
   const Tom = firstNames[4];
   //</editor-fold>

   //region First names
   const John = firstNames[0];
   const James = firstNames[1];
   const Nick = firstNames[2];
   const Ann = firstNames[3];
   const Tom = firstNames[4];
   //endregion

   If you select <editor-fold...> Comments, WebStorm adds comments in the format //<editor-fold desc="Description>//</editor-fold>. With region...endregion Comments selected, the comments in the format //region Description //endregion are added.

   If you have not configured any custom folding regions yet, you can choose either style. However you cannot use both styles in one file. WebStorm recognizes only the style that occurs first and all comments in the other style are ignored.

3. Optionally, specify a description under which the collapsed fragment will be hidden.

4. To collapse or expand the created region, press .

   To show all custom regions collapsed automatically on file opening, open the Settings dialog () , go to Editor | General | Code Folding, and select the Custom folding regions checkbox in the Fold by default area.

5. To navigate to the created custom region, press .

You can hide the code folding arrow icons that appear in the gutter.

1. In the Settings dialog () , go to Editor | General | Code Folding.

2. Clear the Show code folding arrows checkbox.

   note

   This option is available only in the new UI. In the classic UI, use the Show code folding outline option instead.