WebStorm 2021.2 Help

Write and edit source code编写和编辑源代码

When you work with code, WebStorm ensures that your work is stress-free. 当您使用代码时，WebStorm确保您的工作没有压力。It offers various shortcuts and features to help you add, select, copy, move, edit, fold, find occurrences, and save code.它提供各种快捷方式和功能，帮助您添加、选择、复制、移动、编辑、折叠、查找引用和保存代码。

For navigation inside the editor, refer to Editor basics.有关编辑器内的导航，请参阅编辑器基础知识。

Find action查找操作

  • If you do not remember a shortcut for the action you want to use, press Ctrl+Shift+A to find any action by name.如果不记得要使用的操作的快捷方式，请按Ctrl+Shift+A按名称查找任何操作。

You can use the same dialog to find classes, files, or symbols. 可以使用同一对话框查找类、文件或符号。For more information, refer to Searching Everywhere.有关更多信息，请参阅到处搜索。

Add a new file or a scratch file添加新文件或临时文件

  • In the editor, press Ctrl+Alt+Insert to add a file.在编辑器中，按Ctrl+Alt+Insert添加文件。

    If the focus is inside the Project tool window and you want to add a new element, press Alt+Insert.如果焦点位于“项目工具”窗口内，并且要添加新元素，请按Alt+Insert。

  • To create a new Scratch file, press Ctrl+Alt+Shift+Insert.要创建新的临时文件，请按Ctrl+Alt+Shift+Insert。

    WebStorm creates a temporary file that you can run and debug. WebStorm创建了一个可以运行和调试的临时文件。For more information, refer to Scratch files.有关更多信息，请参阅临时文件。

Toggle read-only attribute of a file切换文件的只读属性

If a file is read-only, it is marked with the closed lock icon the Locked icon in the status bar, in its editor tab, or in the Project tool window. 如果文件为只读文件，则在状态栏、编辑器选项卡或项目工具窗口中，该文件将标记为关闭锁定图标the Locked icon。If a file is writable, it is marked with the open lock icon the Unlocked icon in the Status bar.如果文件可写，则会在状态栏中用“打开锁定”图标the Unlocked icon标记该文件。

  1. Open file in the editor or select it in the Project tool window.在编辑器中打开文件或在“项目工具”窗口中选择它。

  2. Do one of the following:执行以下操作之一：

    • From the main menu, select File | File Properties | Make File Read-only or File | File Properties | Make File Writable.从主菜单中，选择“文件”|“文件属性”|“使文件只读”或“文件”|“文件属性”|“使文件可写”。

    • Click the lock icon in the status bar.单击状态栏中的锁定图标。

If a read-only status is set by a version control system, it's suggested that you use WebStorm version control integration features. 如果版本控制系统设置了只读状态，建议您使用WebStorm版本控制集成功能。For more information, see Version control.有关详细信息，请参见版本控制。

Select code constructs选择代码结构

  • In the editor, place the caret at the item you want to select and press Ctrl+W/ Ctrl+Shift+W to extend or shrink your selection.在编辑器中，将插入符号放置在要选择的项目处，然后按Ctrl+W/Ctrl+Shift+W扩展或缩小选择。

    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.在JavaScript文件中，如果在方法调用中选择一个参数，它将扩展到所有参数，然后扩展到整个方法，然后扩展到包含此方法的表达式，然后扩展到更大的表达式块，依此类推。

    Code selection

  • 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.如果只需要高亮显示大括号，请将插入符号放在块闭合大括号/支架之后或块打开大括号/支架之前。

Select code according to capitalization根据大小写选择代码

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Smart Keys.在“设置/首选项”对话框中，按Ctrl+Alt+S键，转到“编辑器”|“常规”|“智能键”。

  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... checkbox is selected on the Editor | General page of the Settings/Preferences dialog Ctrl+Alt+S.如果您想在根据大写字母进行选择时使用双击，请确保在“设置/首选项”对话框Ctrl+Alt+S的“编辑器”|“常规”页面上选中“Honor CamelHumps words...”复选框。

Configure tabs and indents配置制表符和缩进

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style.在“设置/首选项”对话框中，按Ctrl+Alt+S，转到编辑器|代码样式。

  2. Select a language for which you want to configure the indentation.选择要为其配置缩进的语言。

  3. From the options on the right, on the Tabs and Indents, select the Use tab character for the editor to use tabs when you press Tab, indent, or reformat code. 从右侧的选项中，在“制表符和缩进”上，选择“使用制表符”字符，使编辑器在按Tab键、缩进键或“重新格式化”时使用制表符。You can also configure the tab size if you need. 如果需要，还可以配置选项卡大小。If you don't select this option, WebStorm will use spaces.如果不选择此选项，WebStorm将使用空格。

Copy and paste code复制和粘贴代码

You can use the standard shortcuts to copy Ctrl+C and paste Ctrl+V any selected code fragment. 您可以使用标准快捷键复制Ctrl+C并粘贴Ctrl+V任何选定的代码片段。If nothing is selected, WebStorm automatically copies as is the whole line where the caret is located.如果未选择任何内容，WebStorm会自动复制插入符号所在的整行内容。

By default, when you paste anything in the editor, WebStorm performs "smart" paste, for example, pasting multiple lines in comments will automatically add the appropriate markers to the lines you are pasting. 默认情况下，当您在编辑器中粘贴任何内容时，WebStorm执行“聪明的”粘贴，例如，在注释中粘贴多行将自动向要粘贴的行添加适当的标记。If you need to paste just plain text, press Ctrl+Alt+Shift+V.如果只需要粘贴纯文本，请按Ctrl+Alt+Shift+V。

  • 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(Ctrl+Alt+Shift+C) option, WebStorm creates a reference string that includes the line number of the selected line or symbol. 选择“复制引用”（Ctrl+Alt+Shift+C）选项时，WebStorm将创建一个引用字符串，其中包含选定行或符号的行号。You can press Ctrl+V to paste the copied reference anywhere.可以按Ctrl+V将复制的参照粘贴到任意位置。

  • WebStorm keeps track of everything you copy to the clipboard. WebStorm跟踪您复制到剪贴板的所有内容。To paste from history, in the editor, from the context menu, select Copy/Paste Special | Paste from History(Ctrl+Shift+V). 要从历史中粘贴，请在编辑器中，从关联菜单中选择“复制/粘贴特殊”|“从历史中粘贴”（Ctrl+Shift+V）。In the dialog that opens, select your entry and click Paste. 在打开的对话框中，选择条目并单击“粘贴”。

  • When you copy and paste code to the editor, WebStorm displays the hidden (special) characters represented by their Unicode name abbreviation. 当您将代码复制并粘贴到编辑器时，WebStorm将显示由其Unicode名称缩写表示的隐藏（特殊）字符。

Lines of code代码行

WebStorm offers several useful shortcuts for manipulating code lines.WebStorm为操作代码行提供了几个有用的快捷方式。

  • To add a line after the current one, press Shift+Enter. 要在当前行之后添加行，请按Shift+Enter。WebStorm moves the caret to the next line.WebStorm将插入符号移动到下一行。

  • To add a line before the current one, press Ctrl+Alt+Enter. 要在当前行之前添加行，请按Ctrl+Alt+Enter。WebStorm moves the caret to the previous line.WebStorm将插入符号移动到上一行。

  • To duplicate a line, press Ctrl+D.要复制行，请按Ctrl+D。

  • To sort lines alphabetically in the whole file or in a code selection, from the main menu, select 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 Ctrl+Y.要删除行，请将插入符号放置在所需的行上，然后按Ctrl+Y组合键。

  • To join lines, place the caret at the line to which you want to join the other lines and press Ctrl+Shift+J. 要连接线，请将插入符号放置在要连接其他线的线处，然后按Ctrl+Shift+J。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.请注意，WebStorm检查代码样式设置并消除不需要的空格和冗余字符。

  • To split string literals into two parts, press Enter.要将字符串文字拆分为两部分，请按Enter键。

    WebStorm splits the string and provides the correct syntax. WebStorm拆分字符串并提供正确的语法。You can also use the Break string on '\n' intention to split string literals. 您还可以使用“\n”上的中断字符串来拆分字符串文字。Press Alt+Enter or click the Intention action button to select this intention.按Alt+Enter或单击the Intention action button以选择此意图。

    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. WebStorm还提供了一组方便的意图操作来操作字符串文字，例如用模板字符串替换字符串或用管道表达式替换嵌套调用。To view the available actions, position the caret inside the string literal and press Alt+Enter or click the Intention action button.要查看可用操作，请将插入符号放置在字符串文字中，然后按Alt+Enter或单击the Intention action button。

    Applying string manipulation intention

  • To comment a line of code, place the caret at the appropriate line and press Ctrl+/. 要注释一行代码，请将插入符号放置在相应的行上，然后按Ctrl+/。Press Ctrl+/ again on the same line to uncomment it.在同一行上再次按Ctrl+/取消注释。

  • To move a line up or down, press Alt+Shift+Up or Alt+Shift+Down respectively.要向上或向下移动行，请分别按Alt+Shift+Up或Alt+Shift+Down。

  • 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 Ctrl+Alt+Shift+Left for left or Ctrl+Alt+Shift+Right for right.要向左或向右移动（交换）XML或HTML标记属性，请将插入符号放在该属性上，或选择该属性，然后按Ctrl+Alt+Shift+Left键向左移动，或按Ctrl+Alt+Shift+Right键向右移动。

    Move HTML attribute left or right

Code statements代码语句

Move statements移动语句

  • In the editor, place the caret at the needed statement and press Ctrl+Shift+Up to move a statement up or Ctrl+Shift+Down to move a statement down. 在编辑器中，将插入符号放置在所需语句处，然后按Ctrl+Shift+Up向上移动语句，或按Ctrl+Shift+Down向下移动语句。WebStorm moves the selected statement performing a syntax check.WebStorm移动所选语句以执行语法检查。

Complete current statement补全当前报表

  • Select the relevant suggestion for completion and press Ctrl+Shift+Enter. 选择相关的完成建议并按下Ctrl+Shift+Enter。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.WebStorm完成语句，自动在语句末尾添加分号，并将插入符号移动到可以开始键入新语句的位置。

    Completing a statement with Ctrl+Shift+Enter

Unwrap or remove statement展开语句或删除语句

  1. Place the caret at the expression you want to remove or unwrap.将插入符号放置在要删除或展开的表达式处。

  2. Press Ctrl+Shift+Delete.按Ctrl+Shift+Delete。

    WebStorm shows a popup with all actions available in the current context. WebStorm显示一个弹出窗口，其中包含当前上下文中可用的所有操作。To make it easier to distinguish between statements to be extracted and statements to be removed, WebStorm uses different background colors.为了更容易区分要提取的语句和要删除的语句，WebStorm使用了不同的背景色。

    Select a statement to unwrap

  3. Select an action and press Enter.选择某项操作并按下Enter。

Code fragments代码片段

  • 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 Ctrl pressed, drag it to the target location.要复制代码选择，按住Ctrl键，将其拖动到目标位置。

    The drag functionality is enabled by default. 默认情况下，将启用拖动功能。To disable it, in the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General and clear the Enable Drag'n'Drop functionality in editor checkbox in the Mouse section.要禁用该功能，请在“设置/首选项”对话框Ctrl+Alt+S中，转到“编辑器”|“常规”并在“鼠标”部分中清除“在编辑器中启用拖放功能”复选框。

  • To toggle between the upper and lower case for the selected code fragment, press Ctrl+Shift+U.要在选定代码片段的大写和小写之间切换，请按Ctrl+Shift+U。

    Note that when you apply the toggle case action to the CamelCase name format, WebStorm converts the name to the lower case.请注意，当您将“切换大小写”操作应用于驼峰大小写名称格式时，WebStorm会将名称转换为小写。

  • To comment or uncomment a code fragment, select it and press Ctrl+Shift+/.要注释或取消注释代码片段，请选择它并按Ctrl+Shift+/。

    To configure the settings for commenting behavior in JavaScript, in the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style | JavaScript and use the options in the Comment Code section.要配置JavaScript中注释行为的设置，请在“设置/首选项”对话框Ctrl+Alt+S中，转到“编辑器”|“代码样式”|“JavaScript”并使用“注释代码”部分中的选项。

Parameter hints参数提示

Parameter hints show the names of parameters in methods and functions to make your code easier to read. 参数提示显示方法和函数中的参数名称，以使代码更易于阅读。By default, parameter hints are enabled and shown only for values that are literals or function expressions but not for named objects.默认情况下，仅为文字或函数表达式的值启用并显示参数提示，而不显示命名对象的参数提示。

Configure parameter hints配置参数提示

  1. Open the Settings/Preferences dialog Ctrl+Alt+S and go to Editor | Inlay Hints | <required language>.打开“设置/首选项”对话框Ctrl+Alt+S并转到“编辑器”|“镶嵌提示”|<所需语言>。

  2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.从列表中选择参数提示，请确保“显示参数提示”复选框被选中，然后指定你想要参数提示出现的上下文。

  3. For some methods and functions, WebStorm does not show parameter hints in any context. 对于某些方法和函数，WebStorm在任何上下文中都不显示参数提示。Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.单击排除列表...以查看这些方法和函数，可能需要为它们启用参数提示，或者向列表中添加新项。

Code folding代码折叠

Folded code fragments are shown as shaded ellipses (Folded fragment). 折叠的代码片段显示为带阴影的椭圆（Folded fragment）。If a folded code fragment contains errors, WebStorm highlights the fragment in red.如果折叠的代码片段包含错误，WebStorm将以红色突出显示该片段。

To configure the default code folding behavior, in the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Code Folding.要配置默认代码折叠行为，请在“设置/首选项”对话框Ctrl+Alt+S中，转到“编辑器”|“常规”|“代码折叠”。

Expand or collapse code elements展开或折叠代码元素

  • To fold or unfold a code fragment, press Ctrl+NumPad -/ Ctrl+NumPad +. 要折叠或展开代码片段，请按Ctrl+NumPad -/Ctrl+NumPad +。WebStorm folds or unfolds the current code fragment, for example, a single method.WebStorm折叠或展开当前代码片段，例如，单个方法。

  • To collapse or expand all code fragments, press Ctrl+Shift+NumPad -/ Ctrl+Shift+NumPad +.要折叠或展开所有代码片段，请按Ctrl+Shift+NumPad -/ Ctrl+Shift+NumPad +。

    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.WebStorm折叠或展开所选内容中的所有片段，或者，如果未选择任何内容，则折叠或展开当前文件中的所有片段，例如，文件中的所有方法

  • To collapse or expand code recursively, press Ctrl+Alt+NumPad -/ Ctrl+Alt+NumPad +. 要以递归方式折叠或展开代码，请按Ctrl+Alt+NumPad -/Ctrl+Alt+NumPad +。WebStorm collapses or expands the current fragment and all its subordinate regions within that fragment.WebStorm折叠或扩展当前片段以及该片段中的所有从属区域。

  • To fold a block of code inside a pair of matching curly braces {}, press Ctrl+NumPad -. 要在一对匹配的大括号{}内折叠代码块，请按Ctrl+NumPad -。To expand the block, press Ctrl+NumPad +.要展开块，请按Ctrl+NumPad +。

  • 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 Ctrl+.. 要折叠或展开自定义代码片段，请选择它并按Ctrl+.。Alternatively, mark the code fragment as Custom folding region.或者，将代码片段标记为自定义折叠区域。

    You can fold or unfold any manually selected regions in code.可以在代码中折叠或展开任何手动选择的区域。

Fold or unfold nested fragments折叠或展开嵌套片段

  • To expand the current fragment and all the nested fragments, press Ctrl+NumPad *, 1. 要展开当前片段和所有嵌套片段，请按Ctrl+NumPad *, 1。You can expand the current fragment up to the specified nesting level (from 1 to 5).您可以将当前片段扩展到指定的嵌套级别（从1到5）。

  • To expand all the collapsed fragments in the file, press Ctrl+Shift+NumPad *, 1. 要展开文件中所有折叠的片段，请按Ctrl+Shift+NumPad *, 1。You can expand the collapsed fragments up to the specified nesting level (from 1 to 5).可以将折叠的片段展开到指定的嵌套级别（从1到5）。

Custom folding regions自定义折叠区域

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 Ctrl+. or have it collapsed automatically on opening the file.之后，可以使用Ctrl+.展开和折叠片段。或者在打开文件时自动折叠。

Creating a custom folding region

  1. In the editor, select a code fragment and press Ctrl+Alt+T.在编辑器中，选择代码片段并按Ctrl+Alt+T。

  2. From the popup menu, select <editor-fold...> Comments or region...endregion Comments.从弹出菜单中，选择<editor-fold...> Comments或region...endregion Comments。

    //<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>. 如果选择<editor-fold...> Comments，WebStorm将添加//<editor-fold desc="Description>//</editor-fold>格式的注释。With region...endregion Comments selected, the comments in the format //region Description //endregion are added.如果选择region...endregion Comments，WebStorm将添加//region Description //endregion格式的注释。

    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.WebStorm只识别首先出现的样式，而忽略其他样式中的所有注释。

  3. Optionally, specify a description under which the collapsed fragment will be hidden.（可选）指定折叠片段将隐藏在其下的描述。

  4. To collapse or expand the created region, press Ctrl+..要折叠或展开创建的区域，请按Ctrl+.。

    To show all custom regions collapsed automatically on file opening, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Code Folding, and select the Custom folding regions checkbox in the Fold by default area.要显示打开文件时自动折叠的所有自定义区域，请打开“设置/首选项”对话框Ctrl+Alt+S，转到“编辑器”|“常规”|“代码折叠”，然后在“默认折叠”区域中选中“自定义折叠区域”复选框。

  5. To navigate to the created custom region, press Ctrl+Alt+..要导航到创建的自定义区域，请按Ctrl+Alt+.。

Disable code folding outline禁用代码折叠大纲

You can disable the code folding outline that appears on the gutter.可以禁用显示在檐槽上的代码折叠轮廓。

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Code Folding.在“设置/首选项”对话框中，按Ctrl+Alt+S键，转到“编辑器”|“常规”|“代码折叠”。

  2. Clear the Show code folding outline checkbox.清除“显示代码折叠轮廓”复选框。

Last modified: 18 July 2021
Shared indexes共享索引 Editor basics编辑器基础知识