Source code navigation源代码导航
You can quickly navigate through code in the editor using different actions and popups. 您可以使用不同的操作和弹出窗口在编辑器中快速浏览代码。For the detailed information on navigating between the editor and tool windows, check the editor basics.有关在编辑器窗口和工具窗口之间导航的详细信息,请查看编辑器基础知识。
Navigate with the caret用插入符号导航
-
To see the previous caret position, select要查看上一个插入符号位置,请从主菜单中选择“导航”|“返回”或按Ctrl+Alt+Left。 from the main menu or press Ctrl+Alt+Left.To move forward, select要向前移动,请选择“导航”|“向前”或按Ctrl+Alt+Right。 or press Ctrl+Alt+Right. -
To navigate to the last edited location, press Ctrl+Shift+Backspace.要导航到上次编辑的位置,请按Ctrl+Shift+Backspace。 -
To find the current caret location in the editor, press Ctrl+M.要在编辑器中查找当前插入符号位置,请按Ctrl+M。This action might be helpful if you do not want to scroll through a large file.如果不想滚动浏览大文件,此操作可能会有所帮助。However, you can press the Up and Down arrow keys to achieve the same result.但是,您可以按向上和向下箭头键以获得相同的结果。 -
To highlight a word at the caret you are trying to locate, select要突出显示要查找的插入符号处的单词,请从主菜单中选择“编辑”|“查找”|“下一个出现在插入符号处的单词”。 from the main menu. -
To move caret between matching code block braces, press Ctrl+Shift+M.要在匹配的代码块大括号之间移动插入符号,请按Ctrl+Shift+M。 -
To navigate between code blocks, press Ctrl+[ or Ctrl+].要在代码块之间导航,请按Ctrl+[或Ctrl+]。
Move the caret移动插入符号
You can use different actions to move the caret through code. 可以使用不同的操作在代码中移动插入符号。You can also configure where the caret should stop when moved by words and on line breaks.您还可以配置插入符号在被单词和换行符移动时应停止的位置。
-
To move the caret to the next word or the previous word, press Ctrl+Right or Ctrl+Left.要将插入符号移动到下一个单词或上一个单词,请按Ctrl+Right或Ctrl+Left。By default, WebStorm moves the caret to the end of the current word.默认情况下,WebStorm将插入符号移动到当前单词的末尾。When you move the caret to the previous word, the caret is placed in the beginning of the current word.将插入符号移动到上一个单词时,插入符号将放置在当前单词的开头。You can configure the position of the caret when you use these actions.使用这些操作时,可以配置插入符号的位置。In the Settings/Preferences dialog Ctrl+Alt+S, go to .在“设置/首选项”对话框Ctrl+Alt+S中,转到“编辑器”|“常规”。In the Caret Movement section, use the When moving by words and Upon line break options to configure the caret's behavior.在“插入符号移动”部分中,使用“按单词移动时”和“换行时”选项来配置插入符号的行为。 -
To move the caret forward to the next paragraph or backward to the previous one, press Ctrl+Shift+A and search for the Move Caret Forward a Paragraph or Move Caret Backward a Paragraph action.要将插入符号向前移动到下一段落或向后移动到上一段落,请按Ctrl+Shift+A,然后搜索“将插入符号向前移动一段落”或“将插入符号向后移动一段落”操作。You can also select a text and then move the caret forward or backward to a paragraph.也可以选择文本,然后将插入符号向前或向后移动到段落。Press Ctrl+Shift+A and search for the Move Caret Forward a Paragraph with Selection or Move Caret Backward a Paragraph with Selection action.按Ctrl+Shift+A组合键,搜索“将插入符号带选区向前移动一段落”或“将插入符号带选区向后移动一段落”。If you need, you can assign shortcuts to these actions.如果需要,可以为这些操作指定快捷方式。Refer to Configure keyboard shortcuts for details.有关详细信息,请参阅配置键盘快捷键。
Find recent locations查找最近的位置
You can also check your recently viewed or changed code using the Recent Locations popup.您还可以使用“最近位置”弹出窗口检查最近查看或更改的代码。
-
To open the Recent Locations popup, press Ctrl+Shift+E.要打开最近位置弹出窗口,请按Ctrl+Shift+E。The list starts with the latest visited location at the top and contains code snippets.列表顶部以最近访问的位置开始,并包含代码段。 -
While in the popup, use the same shortcut or select the Show changed only checkbox to see only the locations with changed code.在弹出窗口中,使用相同的快捷方式或选中“仅显示已更改”的复选框,以仅查看代码已更改的位置。 -
To search for a code snippet, in the Recent Locations popup, start typing your search query.要搜索代码段,请在“最近位置”弹出窗口中,开始键入搜索查询。You can search by the code text, filename, or breadcrumbs.您可以按代码文本、文件名或面包屑进行搜索。 -
To delete a location entry from the search results, press either Delete or Backspace.要从搜索结果中删除位置条目,请按Delete或Backspace。Keep in mind that the deleted location is also removed from the list of entries that you access with the Ctrl+Alt+Left shortcut.请记住,删除的位置也将从使用Ctrl+Alt+Left快捷键访问的条目列表中删除。
Use bookmarks for navigation使用书签进行导航
-
To create an anonymous bookmark, place the caret at the needed code line and press F11.要创建匿名书签,请将插入符号置于所需的代码行,然后按F11。 -
To create a bookmark with mnemonics, place the caret at the needed code line, press Ctrl+F11 and select a number or a letter for the mnemonics.要创建带有助记符的书签,请将插入符号放置在所需的代码行,按Ctrl+F11并为助记符选择数字或字母。 -
To open the Bookmarks dialog, press Shift+F11.要打开书签对话框,请按Shift+F11。You can use this dialog to manage bookmarks, for example, delete, sort bookmarks, or supply them with a brief description.您可以使用此对话框管理书签,例如,删除、排序书签,或为书签提供简要说明。 -
To navigate to an existing bookmark with letter mnemonics, press Shift+F11 and then press a letter you need. WebStorm returns you to the editor and to the corresponding bookmark.要导航到具有字母助记符的现有书签,请按Shift+F11,然后按所需字母。WebStorm会将您返回到编辑器和相应的书签。 -
To navigate to an existing bookmark with number mnemonics, press Ctrl and the bookmark's number.要导航到具有数字助记符的现有书签,请按Ctrl键并输入书签的数字。 -
Every created bookmark is reflected in the Favorites Alt+2( ) tool window which you can also use for navigation to your bookmarks.每个创建的书签都会反映在收藏夹Alt+2(“查看”|“工具窗口”|“收藏夹”)工具窗口中,您也可以使用该窗口导航到书签。
Navigate between changes在更改之间导航
-
Press Ctrl+Alt+Shift+Down/ Ctrl+Alt+Shift+Up.按Ctrl+Alt+Shift+Down/Ctrl+Alt+Shift+Up。 -
From the main menu, choose从主菜单中,选择“导航”|“下一个/上一个更改”。 . -
Click a change marker, and then click单击更改标记,然后单击or
.
或
。
Navigate to the place of your last edit导航到上次编辑的位置
-
Press Ctrl+Shift+Backspace or select按Ctrl+Shift+Backspace或从主菜单中选择“导航”|“最后一个编辑位置”。 from the main menu.
You can navigate to the initial declaration of a symbol and symbol's type from its usage.您可以从符号的用法导航到符号的初始声明和符号的类型。
Go to declaration and its type转到声明及其类型
-
Place the caret at the desired symbol and press Ctrl+B.将插入符号置于所需符号处,然后按Ctrl+B。Alternatively, use Ctrl+Click: keeping Ctrl pressed, hover your mouse pointer over the symbol. When the symbol turns into a hyperlink, its declaration will be displayed in the tooltip.或者,使用Ctrl+Click:按住Ctrl键,将鼠标指针悬停在符号上。当符号变成超链接时,其声明将显示在工具提示中。Click the hyperlink without releasing the key to open the declaration in the editor.单击超链接而不释放键,以在编辑器中打开声明。 -
For a type declaration, press Ctrl+Shift+B.对于类型声明,请按Ctrl+Shift+B。Alternatively, keeping Ctrl+Shift pressed, hover your mouse pointer over the symbol.或者,按住Ctrl+Shift键,将鼠标指针悬停在符号上。When the symbol turns into a hyperlink, its type declaration will be displayed in the tooltip.当符号变成超链接时,其类型声明将显示在工具提示中。Click the hyperlink without releasing the keys to open the type declaration of the symbol in the editor.单击超链接而不释放键,以在编辑器中打开符号的类型声明。
Jump from declaration to usages从声明跳到用法
-
Place the caret at the declaration of a symbol and press Ctrl+B.将插入符号放置在符号的声明处,然后按Ctrl+B。 -
If the symbol is used only once, WebStorm brings you to this usage and highlights it.如果该符号仅使用一次,WebStorm将带您了解该用法并将其高亮显示。If several usages are found, WebStorm shows them in a popup.如果发现多个用法,WebStorm会在弹出窗口中显示它们。Select the usage to navigate to and press Enter or just click it in the list.选择要导航到的用法,然后按Enter键或在列表中单击它。To view the usages in a separate Find Usages tool window, click要在单独的“查找用法”工具窗口中查看用法,请单击工具栏上的on the toolbar.
。
Go to implementation转到实现
You can keep track of class implementations and overriding methods either using the gutter icons in the editor or pressing the appropriate shortcuts.您可以使用编辑器中的檐槽图标或按相应的快捷键跟踪类实现和重写方法。
-
Click one of the单击编辑器中的左侧列图标/
,
/
gutter icons located in the editor and select the desired ascendant or descendant class from the list.
/
、
/
之一,然后从列表中选择所需的升序或后代类。
-
To navigate to the super method, press Ctrl+U.要导航到超级方法,请按Ctrl+U。 -
To navigate to the implementation, press Ctrl+Alt+B.要导航到实现,请按Ctrl+Alt+B。
Navigate with the Select In popup使用“在弹出窗口中选择”导航
You can automatically locate a file in the Project tool window.可以在“项目”工具窗口中自动定位文件。
-
If the file is opened in the editor, press Alt+F1 to open the Select In popup.如果文件是在编辑器中打开的,请按Alt+F1打开“选择入”弹出窗口。 -
In the popup, select Project View and press Enter. WebStorm locates your target in the Project tool window.在弹出窗口中,选择“项目视图”,然后按Enter键。WebStorm在“项目”工具窗口中定位您的目标。
Locate a file in the Project tool window在“项目工具”窗口中找到文件
You can use the Open Files with Single Click (previously called Autoscroll to Source) and Always Select Opened Files (previously called Autoscroll from Source) actions to locate your file in the Project tool window.您可以“使用单击打开的文件”(以前称为“从源文件自动克隆”)和“始终选择打开的文件”(以前称为“从源文件自动克隆”)操作在“项目”工具窗口中查找文件。
-
In the Project tool window, right-click the Project toolbar and from the context menu select Always Select Opened File.在“项目”工具窗口中,在“项目”工具栏上单击鼠标右键,然后从关联菜单中选择“始终选择打开的文件”。After that WebStorm will track the file that is currently opened in the active editor tab and locate it in the Project tool window automatically.之后,WebStorm将跟踪当前在“活动编辑器”选项卡中打开的文件,并在“项目”工具窗口中自动找到该文件。 -
You can also select the Open Files with Single Click option.您还可以选择“通过单击打开文件”选项。In this case, when you click a file in the Project view, WebStorm will automatically open it in the editor.在这种情况下,当您在“项目”视图中单击一个文件时,WebStorm将在编辑器中自动打开它。
Navigate between errors or warnings在错误或警告之间导航
-
To jump to the next or previous found issue in your code, press F2 or Shift+F2 respectively.要跳转到代码中发现的下一个或上一个问题,请分别按F2或Shift+F2。Alternatively, from the main menu, select或者,从主菜单中选择“导航”|“下一个/上一个突出显示的错误”。 .WebStorm places the caret immediately before the code issue.WebStorm将插入符号放在代码发布之前。 -
Configure the way WebStorm navigates between code issues: it can either jump between all code issues or skip minor issues and only navigate between detected errors.配置WebStorm在代码问题之间导航的方式:它可以在所有代码问题之间跳转,也可以跳过次要问题,只在检测到的错误之间导航。Right-click the code analysis marker in the scroll bar area and choose one of the available navigation modes from the context menu:右键单击滚动条区域中的代码分析标记,然后从关联菜单中选择一种可用的导航模式:-
To have WebStorm skip warnings, infos, and other minor issues, choose Go to high priority problems only.要让WebStorm跳过警告、信息和其他次要问题,请选择“仅转到高优先级问题”。 -
To have WebStorm jump between all detected code issues, choose Go to next problem.要让WebStorm在所有检测到的代码问题之间跳转,请选择“转到下一个问题”。
-
Locate a code element with the Structure view popup使用结构视图弹出窗口查找代码元素
You can use the structure view popup to locate a code element in the file you are working on.您可以使用结构视图弹出窗口在正在处理的文件中查找代码元素。
-
To open the structure view popup, press Ctrl+F12.要打开结构视图弹出窗口,请按Ctrl+F12。 In the popup, locate an item you need.在弹出窗口中,找到所需的项目。You can start typing a name of the element for WebStorm to narrow down the search.您可以开始为WebStorm键入元素的名称以缩小搜索范围。Press Enter to return to the editor and the corresponding element.按Enter键返回编辑器和相应的元素。While in the popup, you can sort file members and see inherited members.在弹出窗口中,您可以对文件成员进行排序并查看继承的成员。
Alternatively, you can use the Structure tool window Alt+7.或者,可以使用“结构”工具窗口Alt+7。

Browse through methods浏览方法
-
To visually separate methods in code, in the Settings/Preferences dialog Ctrl+Alt+S, go to and select the Show method separators option.要在代码中直观地分隔方法,请在“设置/首选项”对话框Ctrl+Alt+S中,转到“编辑器”|“常规”|“外观”并选择“显示方法分隔符”选项。 -
To open the Structure tool window, press Alt+7.要打开“结构”工具窗口,请按Alt+7。
Use the Lens mode使用透镜模式
The lens mode lets you preview your code without actually scrolling to it. 透镜模式允许您预览代码,而无需实际滚动到它。The mode is available in the editor by default when you hover your mouse over the scrollbar. 默认情况下,当您将鼠标悬停在滚动条上时,该模式在编辑器中可用。It is especially useful when you hover over a warning or an error message.当您将鼠标悬停在警告或错误消息上时,它特别有用。

-
To disable the lens mode, right-click the code analysis marker located on the right side of the editor and in the context menu clear the Show code lens on the scrollbar hover checkbox.要禁用透镜模式,请右键单击编辑器右侧的代码分析标记,然后在关联菜单中清除“悬停在滚动栏上时显示代码透镜”复选框。 -
As an alternative, in the Settings/Preferences dialog Ctrl+Alt+S, go to and clear the Show code lens on the scrollbar hover checkbox.或者,在“设置/首选项”对话框Ctrl+Alt+S中,转到“编辑器”|“常规”|“外观”,清除“悬停在滚动栏上时显示代码透镜”复选框”。
Use breadcrumbs for navigation使用面包屑导航
You can navigate through the source code with breadcrumbs that show names of classes, variables, functions, methods, and tags in the currently opened file. 您可以使用面包屑在源代码中导航,面包屑显示当前打开的文件中的类、变量、函数、方法和标记的名称。By default, breadcrumbs are enabled and displayed at the bottom of the editor.默认情况下,面包屑被启用并显示在编辑器的底部。

-
To change the location of breadcrumbs, right-click a breadcrumb, in the context menu select Breadcrumbs and the location preference.要更改面包屑的位置,请右键单击“面包屑”,在关联菜单中选择面包屑和位置首选项。 -
To edit the breadcrumbs settings, in the Settings/Preferences dialog Ctrl+Alt+S, go to .要编辑面包屑设置,请在“设置/首选项”对话框Ctrl+Alt+S中,转到“编辑器”|“常规”|“面包屑”。
Navigate to a file with the Navigation bar使用导航栏导航到文件
Use the Navigation bar as a handy tool to find your way across the project.使用导航栏作为一个方便的工具,在项目中找到您的路线。
-
Press Alt+Home to activate the Navigation bar.按Alt+Home以激活导航栏。 -
Use the arrow keys or the mouse pointer to locate the desired file.使用箭头键或鼠标指针定位所需文件。 -
Double-click the selected file, or press Enter to open it in the editor.双击选定的文件,或按Enter键在编辑器中打开它。
Find a line or a column找一行或一列
-
In the Go to Line/Column dialog, specify a line or column number, or both, separating them with : and click OK.在“转到行/列”对话框中,指定行号或列号,或同时指定两者,并用:
分隔,然后单击“确定”。 -
If you don't want to see the line numbers in the editor, in the Settings/Preferences dialog Ctrl+Alt+S, go to and clear the Show line numbers checkbox.如果不想在编辑器中看到行号,请在“设置/首选项”对话框Ctrl+Alt+S中,转到“编辑器”|“常规”|“外观”并清除“显示行号”复选框。
Find a file path查找文件路径
-
In the editor, press Ctrl+Alt+F12 or in the context menu, select在编辑器中,按Ctrl+Alt+F12或在关联菜单中,选择“在...中打开”|“查找器”。 . -
In the Reveal in Finder popup, select a file or a directory to open in a path finder and press Enter.在“在查找器中显示”弹出窗口中,选择要在路径查找器中打开的文件或目录,然后按Enter键。
Find recent files查找最近的文件
You can search for the recent and recently edited files with the Recent Files popup.您可以使用“最近使用的文件”弹出窗口搜索最近使用的文件和最近编辑的文件。
-
To open the Recent Files popup with the list of recent files, press Ctrl+E.要打开包含最近文件列表的“最近文件”弹出窗口,请按Ctrl+E。 -
To see only the recently edited files, press Ctrl+E again or select the Show changed only checkbox.若要仅查看最近编辑的文件,请再次按Ctrl+E或选中“仅显示已更改”复选框。 -
To search for items in the popup, use the Speed Search functionality.要在弹出窗口中搜索项目,请使用“速度搜索”功能。Just start typing a search query, and the Search for field appears.只要开始键入搜索查询,就会出现“搜索”字段。WebStorm displays the results based on your search query, the list shrinks as you type.WebStorm根据您的搜索查询显示结果,列表会随着您的键入而缩小。
