开始使用WebStorm

四荒八极

于 2025-05-07 06:00:00 发布

阅读量773

点赞数 25

文章标签： webstorm

本文链接：https://blog.csdn.net/li__nan/article/details/147632060

版权

开始使用WebStorm

WebStorm是JetBrains公司出品的集成开发环境（IDE）。它包含了JavaScript和TypeScript开发所需的一切。WebStorm还可以轻松处理有挑战性的任务。无论是解决Git合并冲突还是在多个文件中重命名符号，只需点击几下即可。

打开、检出或创建项目

WebStorm中的项目是一个文件夹，其中包含源代码、库和工具（例如，在node_modules子文件夹中）以及各种应用程序配置文件（例如，package.json或 .eslintrc）。
在WebStorm中打开文件夹后，会自动创建 .idea文件夹，WebStorm在其中存储内部配置，例如：项目代码样式或版本控制系统的配置设置。
你可以从WebStorm欢迎屏幕中打开、检出和创建项目。

打开项目

在欢迎屏幕上，单击Open，然后在打开的对话框中选择项目文件夹。

从版本控制系统检出项目的步骤

在欢迎屏幕上单击从VCS获取（Get from VCS）。
或者，从主菜单中选择“ File | New | Project from Version Control”，或“VCS | Get from Version Control”，或“Git | Clone”。
在主菜单中，你会看到WebStorm支持所有版本控制系统，而不是只支持Git。例如，Mercurial或Perforce。
在打开的对话框中，从列表中选择你使用的版本控制系统，并指定要从中检出程序源代码的存储库。

创建一个空的WebStorm项目

在欢迎屏幕上单击“创建新项目（Create New Project）”，或从主菜单中选择“File | New | Project”。会打开“新建项目”对话框。
在左侧窗格中，选择“空项目（Empty Project）”。在右侧窗格中，指定应用程序文件夹并单击“创建（Create）”。

在项目中创建新文件的步骤

在项目工具窗口中，选择要在其中创建新文件的文件夹，然后按 Alt+Insert。
或者，从文件夹的右键菜单中选择“新建”，然后从列表中选择文件类型：

熟悉WebStorm用户界面

WebStorm窗口由编辑器、菜单、工具栏、导航栏、状态栏和许多WebStorm工具窗口组成。这些工具窗口显示工作区的底部和侧面，包括：调试代码、运行测试、与版本控制系统交互等等。
用户界面的构成
你可以根据需要调整WebStorm的布局。例如，如果你想专注于编写代码，可以尝试专注模式。它隐藏了所有工具栏、工具窗口和编辑器选项卡，因此你有更多的可用空间。要切换到专注模式，请从主菜单中选择“View | Appearance | Enter Distraction Free Mode”。
专注模式的另一种选择是按 Ctrl+Shift+F12 隐藏所有工具窗口。再次按此快捷键可以将布局还原。
当工具窗口隐藏时，可以通过快捷键访问，可以在工具窗口激活时，使用任何键盘命令。要返回编辑器，按Esc键。当工具窗口显示时，按快捷键只会激活窗口。
以下是常用的工具窗口的快捷键列表：

工具窗口	快捷键
项目	ALT+1
版本控制	ALT+9
运行	ALT+4
调试	ALT+5
终端	ALT+F12
编辑器	Esc

在大多数工具窗口和弹出窗口中，WebStorm支持快速搜索，输入关键字过滤列表或导航到特定内容。如：在项目工具窗口中，输入文件名中的几个字符，可以高亮显示符合的文件。

找到你要找的代码

WebStorm附带了一组搜索和导航功能，可以帮助你在任何代码中找到要找的内容，无论它有多混乱。

查找项目符号的调用

要查找项目中特定符号的调用位置，WebStorm建议通过“查找调用”（Alt+ F7）进行全面搜索，把光标定位到符号处，按Alt+ F7

按名称查找项目符号

你可以按名称查找类 Ctrl+N ，查找文件 Ctrl+Shift+N ，或查找符号 Ctrl+Alt+Shift+N ，也可以使用全局搜索（两次Shift）

搜索文本片段

要在当前文件中查找文本，请按 Ctrl+F 并输入关键字。
要在文件夹、任意范围或整个项目中搜索，请按 Ctrl+Shift+F 并指定关键字和搜索范围。

转到符号声明

转到声明（Ctrl+B或Ctrl+Click）将定位到首次声明符号的位置。这个功能可以在源代码中的任何位置工作。用法是这样，光标定位到要查找声明的符号，按下Ctrl+B，或按Ctrl同时用鼠标左键点击，就能定位到第一次声明当前符号的位置。

历史记录

WebStorm会自动记录你对源代码所做的更改、重构的结果等，称作本地历史记录，默认保存5天内的记录。要查看历史记录，请从主菜单中选择“VCS | Local History | Show History”。可以查看更改，还原，或创建补丁。

补全代码

WebStorm自动补全代码的来源包括了标准语言API、项目依赖。按 Ctrl+Space 获取当前位置的代码补全选项，这个快捷键在windows系统中和输入法切换的快捷键冲突了，可以使用菜单“Code | Code Completion | Basic”，也可以修改掉默认的快捷键，弹出列表中每个建议旁边的图标指示其类型：

默认情况下，JavaScript和TypeScript文件中的补全建议根据机器学习算法按相关性排序。要关闭此排序，请打开“设置”对话框，转到“Editor | General | Code Completion”，清除“Sort completion suggestions based on machine learning”复选框。

实时检查并修复代码

WebStorm监控源代码，并试图保持其准确和干净。它检测潜在的错误和问题，并提供快速修复建议。每当WebStorm发现未使用的代码、无休止的循环、缺少导入语句的符号以及许多其他可能需要注意的问题时，都会看到高亮显示和一个灯泡。单击此灯泡或按 Alt+Enter 键应用修复建议。
你忘了添加导入语句？WebStorm将该符号标记为未解析，并显示一个工具提示，其中包含快速修复：
自动提示
或者，按 Alt+Enter 键并单击插入导入语句“Insert ‘import “Customer”’:”

对于ES6和TypeScript符号，WebStorm可以在代码补全时自动添加缺失的导入语句：
自动添加导入语句
要查看检查项的完整清单，请在设置对话框中，单击“Editor”下的“Inspections”。可以禁用其中一些，或启用其他检查，此外，还可以调整每类检查结果的严重程度，你可以决定是作为错误还是警告。

重构代码

重构意味着在不改变应用程序行为的情况下更新源代码。重构可以帮助你保持代码的健壮、简洁和易于维护。WebStorm对整个项目进行了巧妙的更改，确保重构后的代码以与重构前相同的方式工作。例如，如果重命名一个类，WebStorm会自动重命名其所有调用和导入语句。
重命名类

在编辑器或项目工具窗口中，选择要重构的表达式或符号，然后按 Ctrl+Alt+Shift+T
从重构列表中，选择所需的操作。

运行并调试应用程序

在WebStorm中，运行或调试应用程序的入口是“运行/调试配置”。WebStorm为不同类型的应用程序和文件提供了许多预定义的运行/调试配置模板。你需要在配置中提供的信息取决于其类型，可以是要运行的文件或测试。某些配置可以附加到已运行的应用程序，在这种情况下，需要指定要附加到的URL和端口。

运行应用程序

创建适合你的程序类型的运行配置，然后单击“运行”按钮。
在某些情况下，可以在不创建运行配置的情况下运行程序或文件。例如，要使用Node运行任何文件，只需在其右键菜单上选择“Run <file_name>”或按 Ctrl+Shift+F10 。这也适用于HTML文件，WebStorm会在浏览器中打开它。
如果你的项目有npm脚本，用于在开发模式下启动或构建你的程序，只需在编辑器中打开你的项目文件 package.json，在编辑器侧边栏的空白处点击运行按钮，从弹出菜单中选择运行：

开始调试

使用WebStorm，你可以调试各种类型的应用程序：客户端程序、Node.js程序、测试程序等。以下是如何调试在外部服务器上运行的客户端JavaScript。

根据需要在JavaScript代码中设置断点。
在开发模式下运行程序，如：npm start，并在浏览器中复制运行程序的URL地址。
选择“Run | Edit Configurations”。或者，从工具栏上的列表中选择“编辑配置（Edit Configurations）”。
在打开的“编辑配置”对话框中，单击“添加（+）”按钮，从列表中选择“JavaScript调试”。

在打开的对话框中，填写运行程序的URL地址。如上述步骤2所述，可以从浏览器的地址栏复制此URL。
从工具栏上的“Select run/debug configuration”列表中，选择刚才创建的配置，然后单击调试按钮。

或者，按住 Ctrl+Shift 并单击运行工具窗口中的URL链接。
将在浏览器中打开指定的URL地址，并显示调试工具窗口。
在Debug工具窗口中，开始调试：单步执行、停止、恢复、挂起、查看实际的HTML DOM、在Console中运行JavaScript代码片段，等等。
WebStorm有一个内置的web服务器，可用于在web浏览器或IDE的内置浏览器中预览和调试程序。此服务器始终在运行，不需要任何手动配置。

遵循代码风格标准

WebStorm会根据每种语言特定的代码样式设置自动格式化所有新代码。这些设置也会在重构过程中应用。
你可以自己配置代码样式，也可以让Prettier来处理。Prettier 是一个流行的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、HTML、JSON、Markdown 等众多常见的编程语言和文件格式。

对源代码使用版本控制

WebStorm支持许多流行的版本控制系统，如Git（或GitHub）、GitLab、Mercurial、Perforce、Subversion和CVS。在大多数情况下，WebStorm会自动检测你使用的VCS系统。
VCS菜单为你提供所有可用命令。在提交工具窗口（Alt+0）中，你可以查看和跟踪团队所做的更改，创建更改列表，提交和推送更改等等。
最常用的操作，如提交、推送和查看历史记录，也可以按 ALT+` 从弹出窗口中选择相关操作。