WebStorm 2023.2 Help

Smart Keys

Use this page to enable or disable specific smart keys and to define which actions you want to be invoked automatically.

Item

Description

Home moves caret to first non-whitespace character

When this checkbox is selected, on pressing Home, the caret is positioned at the first non-whitespace character of the current line. Pressing Home subsequently moves the caret from the Smart Home position to the first column and back.

End on blank line moves caret to indent position

When this checkbox is selected, on pressing End in an empty line, the caret is positioned with the indent, which WebStorm assumes to be reasonable in the current code point (indentation is based on the current Code Style Settings).

Insert pair brackets (), [], {}, <>

Select this checkbox to have WebStorm automatically add a closing bracket for each typed opening bracket, respectively.

Insert pair quote

Select this checkbox to have WebStorm automatically add a closing single or double quote for each typed opening single or double quote, respectively.

Reformat block on typing '}'

If this checkbox is selected, then, on typing the closing curly brace, the enclosed code block is reformatted automatically if the formatting of this code block does not match the selected code style.

Use "CamelHumps" words

Select this checkbox to have WebStorm discern separate words within CamelHump names. Words within a name should start with a capital letter or an underscore. This option impacts some editor actions, for example:

  • Caret Move Control+ArrowRight/Control+ArrowLeft

  • Caret Move with Selection (Control+Shift+ArrowRight/Control+Shift+ArrowLeft)

  • Select Word at Caret Control+W

  • Delete to Word Start/End (Control+Backspace and Control+Delete respectively)

  • Double-clicking (if Honor "CamelHumps" word settings when selecting using double click is enabled).

Honor "CamelHumps" words settings when selecting on double click

Select this checkbox to have WebStorm invoke the CamelHumps selection when words are selected by double-clicking.

This feature works only if the Use 'CamelHumps' words option is enabled.

Surround selection on typing quote or brace

If this checkbox is selected, the selected text on typing a quote, double-quote or brace, will be surrounded with these characters. If this checkbox is not selected, then the typed quotes, double-quotes or braces will replace the selection.

Add multiple carets on double Control with arrow keys

If this checkbox is selected, then:

  • pressing Control plus up/down arrow keys leads to creating multiple carets.

  • pressing Control plus left/right arrow keys or Home/End leads to creating a selection.

For more information, refer to the Multicursor section.

Jump outside closing bracket/quote with Tab when typing

If this checkbox is selected, pressing Tab when typing inside brackets/quotes will move the caret outside the closing bracket/quote. If this checkbox is not selected, pressing Tab will insert the Tab character.

Note that this only works on initial typing: during subsequent editing, pressing Tab inside brackets/quotes will insert the Tab character.

Enter

Use this area to define the actions to be invoked by pressing Enter.

  • Smart indent: select this checkbox to have WebStorm add a new line and place the caret at it, with the indent that WebStorm assumes to be reasonable in the current point of code (indentation is based on the current Code Style settings).

    If the checkbox is cleared, upon pressing Enter in a blank line, WebStorm adds a new line and positions the caret at the current non-space character column.

  • Insert pair '}': select this checkbox to have WebStorm automatically position a closing brace } at the proper column when Enter is pressed in an empty line. In this case WebStorm seeks backward for the nearest unclosed opening brace { and places the closing one at the corresponding indentation level.

  • Close block comment: unselect this checkbox to disable the automatic closure of the block comment when hitting Enter.

  • Insert documentation comment stub: this checkbox defines the behavior on pressing Enter after the opening documentation comment. This functionality works only for JavaScript , Java, Groovy, and Swift.

    • If this checkbox is selected, WebStorm generates a documentation comment stub.

      For the function comments, this stub contains the required tags (@param tags for each parameter declared in the signature, and @return). For more information, refer to , JSDoc comments.

    • If this checkbox is not selected, only the closing part of the comment is generated.

Unindent on Backspace

Use this list to define the actions to be invoked by pressing Backspace key. The available options are:

  • Disabled: pressing Backspace returns the caret by one position at a time.

  • To nearest indent position

  • To proper indent position

Reformat on paste

Use this list to specify how to place pasted code blocks. The available options are:

  • None: the pasted code is inserted at the caret location as plain text without any reformatting or indenting.

  • Indent block: the pasted code block is positioned at the proper indentation level, according to the current Code Style Settings, but its inner structure is not changed.

  • Indent each line: each line of the pasted code block is positioned at the proper indentation level, according to the current Code Style Settings.

  • Reformat block: the pasted code block is reformatted according to the current Code Style Settings.

Reformat again to remove custom line breaks

When this option is enabled, invoking the Reformat Code Control+Alt+L or Reformat File Control+Alt+Shift+L actions the second time after the code has been reformatted will remove custom line breaks.

When the option is disabled, invoking the actions the second time opens a dialog in which you need to confirm removing line breaks first. Click Don't ask again in the dialog to never remove custom line breaks when you reformat code for the second time.

HTML/CSS

Use this page to configure the editor behavior for HTML, XML, and CSS.

Item

Description

XML/HTML

In this area, define the actions to be invoked automatically when editing XML or HTML code.

  • Insert closing tag on tag completion: select this checkbox to have WebStorm automatically insert a closing XML or HTML tag upon entering the corresponding opening one.

  • Insert required attributes on tag completion: select this checkbox to have WebStorm display a template with all mandatory attributes of the typed tag.

  • Insert required subtags on tag completion: select this checkbox to have WebStorm display a template with all mandatory subtags.

  • Start attribute on tag completion: select this checkbox to have WebStorm display a template with the first mandatory attribute of the typed tag.

  • Add quotes for attribute value on typing '=' and attribute completion: select this checkbox to have WebStorm automatically add quotes for the value of the attribute that you are currently typing.

  • Auto-close tag on typing '</': select this checkbox to automatically add a closing tag after entering </. Clear this checkbox to turn off such auto-completion.

  • Simultaneous <tag></tag> editing: When this checkbox is selected, and you edit an opening tag, the corresponding closing tag is automatically changed accordingly.

    If this checkbox is cleared, editing the opening tag does not affect the closing tag which remains unchanged. As a result, the opening and closing tags do not match and the entire construct is underlined as erroneous.

    The Simultaneous <tag></tag> editing checkbox controls the behavior of WebStorm in the following contexts:

    • HTML files

    • HTML injections within JavaScript code

    • HTML with Handlebars/Mustache templates

    • Handlebars/Mustache template files with the extension .hbs

    • XML, XHTML files

    • DTD files

    • JSX files

CSS

In this area, define the selection of CSS identifiers/classes:

  • Select whole CSS identifier on double-click: if this checkbox is selected, double-clicking a CSS identifier or class name selects the entire name up to the prefix. For example, double-clicking gray within <div class="text-gray-600"> select the whole class name text-gray -600:

    Select whole CSS identifier on double-click: ON

    If this checkbox is cleared, double-clicking a CSS identifier or class name selects a portion of the name up to of within the nearest hyphens:

    Select whole CSS identifier on double-click: OFF

JSON

Use this page to configure the editor behavior for JSON.

Item

Description

JSON

The settings in this area control automatic adding of commas, quotes, and whitespaces in JSON context in compliance with the JSON syntax.

YAML

Use this page to configure the editor behavior for YAML.

Item

Description

Auto expand key sequences upon paste

With this option selected, WebStorm properly formats key sequences when you paste them from the clipboard. For example, the key2.another_key sequence pasted from the clipboard will be displayed with the correct hierarchy.

Auto expand key sequences upon paste is on

Otherwise, if the option is cleared, key sequences are pasted from the clipboard "as is", hierarchy is not preserved, and consequently proper highlighting is not provided.

Auto expand key sequences upon paste is off

Markdown

Use this page to configure the editor behavior for Markdown.

Settings | Editor | General | Smart Keys | Markdown

Tables

Reformat table when typing

Automatically adjust the rows and columns of tables to fit the content into the cells.

Insert HTML line break ('<br/>') instead of new line inside table cells

Add a proper line break when you press Enter inside a table cell. Without this option, the line will not actually break in the rendered HTML. You need to add an empty line if you want to start a new paragraph.

Use Shift+Enter to insert new table row

Press Shift + Enter to add a new table row.

Use Tab/Shift+Tab to navigate table cells

Press Tab to jump to the next table cell. Press Shift + Tab to jump to the previous table cell.

Lists

Adjust indentation on type

Automatically adjust the indentation for list items when you type.

Use smart Enter and Backspace

Press Enter to add new list items. Press Backspace to remove the item bullets.

Renumber list when typing

Automatically adjust the numbering of ordered lists as you type.

Other

Insert links to images or files on drag-and-drop

Drag and drop images and other files into the Markdown file editor to automatically generate a reference.

JavaScript

Use this page to configure the editor behavior for JavaScript.

Automatically replace string literal with template string on typing '${'

By default, the checkbox is selected and string literals are converted to template strings automatically when you type ${. This behavior may break interpolation in your code, for example, in Vue.js templates.

Clear the checkbox to prevent breaking interpolation and preserve string literals.

Automatic replacement on typing '${' is on
Automatic replacement on typing '${' is off

Start template string interpolation on typing '$'

Select this checkbox to insert expressions with normal strings after the $ sign instead of adding curly braces {} automatically. For more information, refer to Expression interpolation.

Interpolation off
Interpolation on

Escape text on paste in string literals

By default, WebStorm automatically inserts backslash escape symbols (\) when you paste text into a JavaScript string. Clear the checkbox to suppress automatic text escaping.

Convert attributes when pasting HML into JSX files

By default, when you copy a piece of HTML code with class attributes or on-event handlers and paste it into JSX, WebStorm automatically replaces these attributes with React-specific ones (className, onClick, onChange, and so on.)

To copy HTML code to JSX "as is", clear the checkbox or use Paste Simple Control+Alt+Shift+V.

Escape JSDoc leading asterisks on copy and paste

By default, the checkbox is selected and a leading asterisk character (*) is automatically inserted when you paste a code fragment into a selection within a JSDoc comment.

In some cases, adding an asterisk in preposition may break formatting or make JSDoc comments hard to read. To suppress adding asterisks automatically on pasting code snippets, clear the Escape JSDoc leading asterisks on copy and paste checkbox.

Escape JSDoc leading asterisks on copy and paste is on
Escape JSDoc leading asterisks on copy and paste is off
Last modified: 07 September 2023