JavaScript开发工具WebStorm使用教程：用户界面

本文主要介绍WebStorm用户界面。

在 WebStorm 中打开项目时，默认用户界面如下所示：

根据插件集和配置设置，您的 IDE 的外观和行为可能会有所不同。

编辑

重点：Escape

使用 编辑器阅读、编写和探索您的源代码。

行动指标和行动清单

打开动作列表：Alt+Enter

例如，装订线中出现的各种图标帮助您注意快速修复和其他操作。单击此类操作指示器或按下会Alt+Enter打开一个操作列表，其中包含所有快速修复和在当前插入符号位置可用的其他操作。

导航栏

重点：Alt+Home

显示/隐藏：查看 | 外观 | 导航栏

顶部的导航栏是项目视图的快速替代方案，您可以在其中浏览项目结构、打开特定文件并跳转到当前文件中的特定代码元素。

如果启用了VCS 集成，导航栏中的项目会根据VCS 文件状态颜色突出显示。

使用导航栏右侧的按钮来运行和调试您的应用程序，并执行基本的版本控制操作（如果配置了版本控制集成）。它还包含运行任何东西 运行任何东西按钮（按Ctrl两次）和到处搜索 到处搜索按钮（按Shift两次）的按钮。

默认情况下，带有用于打开和保存文件、撤消和重做操作的按钮的主工具栏是隐藏的。要显示它，请选择查看 | 外观 | 工具栏。

状态栏

显示/隐藏：查看 | 外观 | 状态栏

当您将鼠标指针悬停在主窗口底部时，状态栏的左侧会显示最新的事件消息和操作说明。单击状态栏中的消息以在事件日志中打开它。当您正在搜索问题的解决方案或需要将其添加到支持票证或 WebStorm 问题跟踪器时，右键单击状态栏中的消息并选择复制以粘贴消息文本。

使用快速访问按钮显示工具窗口或在工具窗口隐藏工具窗口之间切换并隐藏工具窗口栏。

状态栏还显示后台任务的进度。您可以单击后台任务以显示后台任务管理器。

状态栏的右侧部分包含指示整个项目和 IDE 状态并提供对各种设置的访问的小部件。根据插件集和配置设置，小部件集可以更改，右键单击状态栏以选择要显示或隐藏的小部件。

小部件

描述

52:11

显示编辑器中当前插入符号位置的行号和列号。单击数字可将插入符号移动到特定的行和列。如果您在编辑器中选择代码片段，WebStorm 还会显示所选片段中的字符数和换行符。

如果

显示用于在当前文件中换行的行尾，单击此小部件以更改行分隔符。

UTF-8

显示用于查看当前文件的编码，单击小部件以使用另一种编码。

列

指示为当前编辑器选项卡启用列选择模式，您可以按Alt+Shift+Insert切换它。

锁定/解锁

如果要编辑文件，请单击以锁定文件（将其设置为只读）或将其解锁。

JSON 模式

当 JSON 文件（例如package.json或tsconfig.json）在活动编辑器选项卡中打开时，小部件会出现在状态栏上。该小部件显示了此 JSON 文件中使用的架构，从JSON中了解更多信息。

打字稿

在编辑器中打开 TypeScript 文件后，小部件始终显示在状态栏上。使用小部件编译 TypeScript 并配置或重新启动TypeScript 语言服务，从TypeScript和将 TypeScript编译成 JavaScript了解更多信息。

Git

master 如果要编辑文件，请单击以锁定文件（将其设置为只读）或将其解锁。

2 spaces

显示当前文件中使用的缩进样式。单击以配置当前文件类型的选项卡和缩进设置或在当前项目中禁用缩进检测。

554 of 2933M

显示 WebStorm 在堆内存总量中消耗的内存量。

<no default server>

单击以将任何已配置的部署服务器或服务器组设置为执行部署操作的默认值。

工具窗口

显示/隐藏：查看 | 工具窗口

工具窗口提供了补充编辑代码的功能。例如，项目工具窗口显示项目的结构，运行工具窗口显示应用程序运行时的输出。

默认情况下，工具窗口停靠在主窗口的侧面和底部。您可以根据需要对它们进行排列、取消停靠、调整大小、隐藏等等，右键单击工具窗口显示选项菜单按钮的标题或单击标题以查看其排列选项。

您可以分配快捷方式以快速访问您经常使用的工具窗口，其中一些默认情况下具有快捷方式。例如，要打开项目工具窗口，请按Alt+1，要打开终端工具窗口，请按Alt+F12；要从编辑器跳转到最后一个活动工具窗口，请按F12。

上下文菜单

您可以右键单击界面的各种元素以查看当前上下文中可用的操作。例如，右键单击项目工具窗口中的文件以查看与该文件相关的操作，或在编辑器中单击鼠标右键以查看适用于当前代码片段的操作。

大多数这些操作也可以从屏幕顶部的主菜单或主窗口中执行。带有快捷方式的操作会在操作名称旁边显示快捷方式。

弹出菜单

弹出菜单提供对与当前上下文相关的操作的快速访问。以下是一些有用的弹出菜单及其快捷方式：

• Alt+Insert：打开Generate弹出窗口以根据上下文生成样板代码。
• Ctrl+Alt+Shift+T：打开Refactor This弹出窗口，其中包含上下文可用的重构列表。
• Alt+Insert：在项目工具窗口中打开新建弹出窗口，用于将新文件和目录添加到项目中。
• Alt+`打开VCS 操作弹出窗口，其中包含适用于您的版本控制系统的上下文可用操作。

您可以使用常用操作的快速列表创建自定义弹出菜单。

主窗口

主窗口允许您使用单个 WebStorm 项目。您可以在多个窗口中打开多个项目，默认情况下，窗口标题显示项目名称和当前打开文件的名称。如果有多个模块，它也会显示相关模块的名称。

要显示项目和当前文件的完整路径，请在外观和行为 |上选择始终在窗口标题中显示完整路径，IDE设置的外观Ctrl+Alt+S页面。

以上就是有关WebStorm用户界面的相关介绍，更多关于WebStorm教程的内容可进入官网查看。

正值“315”消费者权益日，为正版护航，联合Jetbrains厂商推出满减优惠，旗下产品最高减1200，欢迎大家进入活动详情页了解详情。

WebStorm| 下载试用

WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样，它使你的开发体验更加愉快，使日常工作自动化，并帮助你轻松处理复杂的任务。

标签：

来源：慧都