WebStorm集成开发环境

WebStorm IDE 顾名思义，它是 Jet Brains 为开发人员提供的软件编辑器工具。它是最智能的 JavaScript 编辑器，适用于 Web、移动、服务器以及桌面应用程序开发。我们可以开发客户端应用程序以及服务器端应用程序。它支持 Angular、React 或 Vue.js 进行前端开发，支持 Node.js 和 Meteor 进行服务器端或后端开发； Ionic、Cordova 和 React Native 用于移动开发，Electron 用于桌面应用程序开发。 WebStorm IDE 的最新版本是 WebStorm 2020.1，具有全新的精美外观和感觉。它构建在名为 Intellij 的开源平台之上。

开始您的免费软件开发课程

网络开发、编程语言、软件测试及其他

WebStorm IDE 是如何工作的？

初始配置后首次打开 WebStorm 时，我们会看到以下屏幕：

从这里，我们可以创建一个新项目或打开一个现有项目，或者从版本控制（如 Github、SVN 或任何其他 VCS）中查看该项目。

让我们创建一个空的新项目，然后它会询问项目位置，采用默认值并单击创建：-

我们看到以下屏幕并开始我们的项目：

让我们在项目中创建一个新文件。在项目工具窗口中选择我们要创建新文件的文件夹，然后右键单击并选择新建，如下所示或按 alt+insert。

创建了一个名为timer.js 的文件来了解更多功能，例如代码完成。

说明：在上面的示例中，只需输入“cla”，就会弹出代码补全，或者我们可以按 Ctrl+Space 来获取代码补全选项。

让我们探索一下 WebStorm 用户界面：

1. 编辑器：我们编写代码的地方。我们可以使用无干扰模式隐藏所有工具栏、工具窗口，以便我们可以专注于编写代码，我们也可以使用 Ctrl+Shift+F12 快捷键。
2. 项目工具窗口：它有项目、版本控制、调试等多个工具窗口，我们可以使用快捷键来隐藏或取消隐藏工具窗口。
3. 弹出窗口：它用于加速搜索或导航到特定项目。
4. 右键菜单：用于创建新文件、重构代码、检查本地历史记录等
5. 导航栏：它是项目工具窗口的替代方案，用于在文件夹之间移动并查看其内容。
6. 状态栏：它显示我们的项目、代码等的状态，与其他应用程序相同。

WebStorm IDE 功能

以下是WebStorm IDE的功能：

1.智能编码辅助

当我们键入时，它为所有支持的语言提供最佳的代码完成结果。我们在使用 CSS 时获得属性及其值的代码补全。它还具有许多内置检查，一旦我们键入并建议所有可用的快速修复选项，就会报告所有错误和警告。如果右侧编辑器装订线中标记的任何代码行存在问题，我们可以通过右侧编辑器装订线轻松识别日志文件中的错误和警告。

WebStorm IDE 支持 Node.js、React、Angular、Vue.js、Meteor 等所有现代框架，并且还为这些框架提供高级编码帮助。

我们可以在 .editorconfig 项目文件中提及我们的代码风格，当我们键入代码时，WebStorm 会自动应用配置的代码风格，或者立即重新格式化整个文件以提供一致的代码风格。

Webstorm具有强大的导航和搜索功能。我们可以使用编辑器的结构视图轻松浏览打开的文件，这在处理大型项目时节省了大量时间。我们可以使用“Search Everywhere”对话框在整个项目中搜索任何内容，例如文件、类名或符号。我们可以使用 Ctrl+Click 来了解代码中任何方法、函数或变量的定义。

2.调试、跟踪和测试

WebStorm 在 IDE 本身中内置了一个高级调试器，用于与 Google Chrome 一起使用的客户端代码，这有助于在 IDE 中调试代码，而无需在编辑器和浏览器之间来回切换进行调试。它也节省了我们的时间。我们还可以使用 Node.js 的全功能内置调试器来调试本地或远程计算机上运行的应用程序。

我们可以使用间谍js内置工具来跟踪客户端JavaScript和Node.js代码并识别任何可能的问题。它还提供了一个很好的项目结构可视化或图表，使我们能够可视化项目文件如何与函数调用连接。

WebStorm 与 JavaScript 测试框架集成，有助于轻松执行单元测试。我们可以选择 Karma 或 Jest 来测试客户端 JavaScript 代码，或者选择 Mocha 来测试 Node.js。分析数据以最容易访问的方式呈现，帮助我们轻松识别应用程序中任何可能的内存泄漏或热点。

3.无缝工具集成

WebStorm 可以通过统一的 UI 与著名的任务运行器、测试框架和包管理器集成以进行 Web 开发。我们可以使用首选项来访问已安装的本地 npm 和浏览器依赖项的完整列表，或者安装和更新 npm 模块和浏览器依赖项。我们可以将 WebStorm 与 PhoneGap、Cordova 和 Ionic 框架集成，并开始从 IDE 本身创建、模拟和部署移动应用程序。 WebStorm 有一个内置编译器，可以帮助快速轻松地将我们的 TypeScript 代码编译为 JavaScript。

4.定制

我们可以根据我们的选择自定义 WebStorm IDE，或者以完全适合我们编码风格的方式对其进行调整。它有浅色和深色模式，我们还可以更改颜色方案或搜索可用的主题来使用。我们可以自定义工具窗口、编辑器样式、快捷方式、视觉主题等。它会跟踪对我们的源文件所做的更改，即使任何其他应用程序所做的更改也可以保护我们免受任何意外丢失或修改。

WebStorm IDE 的优点

1. 我们不必浪费时间搜索多个插件并安装它，因为它附带各种内置开发者工具以及开箱即用的语言和框架支持。
2. 由于统一的 UI，它可以帮助我们提高工作效率，因为我们无需在终端和文本编辑器之间切换。
3. 它可以与几乎所有可用的 VCS 集成，例如 Git、Github、Mercurial 等。我们可以使用 IDE 中提供的可视化差异/合并工具提交文件、审查更改并解决冲突。
4. 我们可以简单地启用 JSCS，一个 JavaScript 代码风格检查器来检查项目代码是否符合缩进、关键字后的空格等。
5. 它还有实时编辑功能，可以立即更新浏览器内容，而无需重新加载我们在 HTML 和 CSS 文件中所做的任何更改。目前仅 Google Chrome 支持。

结论

WebStorm IDE 拥有许多很酷的功能和出色的用户体验。它有一个统一的 UI，因此我们可以从一个窗口完成几乎所有的编码、调试、运行任务。它提供快速导航。我们可以下载并享受 30 天的免费试用。你会成为它的粉丝。

以上是WebStorm集成开发环境的详细内容。更多信息请关注PHP中文网其他相关文章！