JavaScript

最后修改：2022 年 1 月 17 日

使用 PhpStorm，您可以使用JavaScript和Node.js开发现代 Web、移动和桌面应用程序。

PhpStorm 还支持React、Angular、Vue.js和其他框架，并提供与各种 Web 开发工具的紧密集成。

支持 JavaScript 的编码帮助包括关键字、标签、变量、参数和函数的补全、错误和语法突出显示、格式化、大量代码检查和快速修复，以及常见的和特定于 JavaScript 的重构。PhpStorm 还与JavaScript linter和Flow 类型检查器集成。

使用 PhpStorm 内置调试​​器，您可以调试客户端和服务器端代码，甚至可以在交互式调试器控制台中运行 JavaScript 代码片段。请注意，PhpStorm 仅支持在Chrome或Chrome系列的任何其他浏览器中调试 JavaScript 。从在 Chrome 中调试 JavaScript了解更多信息。

PhpStorm 与Jest、Karma、Protractor、Cucumber和Mocha测试框架集成。PhpStorm 支持运行和调试测试以及测试和主题之间或失败的测试和导致问题的代码片段之间的导航。

在此页面上，您将找到一个简短的入门指南，它将逐步引导您从创建 Web 应用程序到调试和测试它。

在你开始前

确保在Settings/Preferences |上启用了JavaScript 和 TypeScript插件。插件页面，标签Installed。有关详细信息，请参阅管理插件。

创建一个新的应用程序

从现有的 JavaScript 应用程序开始

如果您要继续开发现有的 JavaScript 应用程序，请在 PhpStorm 中打开它，选择要使用的 JavaScript 版本，然后配置其中的库。可选择下载所需的 npm 依赖项。

打开您机器上已有的应用程序源

  • 在欢迎屏幕上单击打开或选择文件 | 从主菜单打开目录。在打开的对话框中，选择存储源的文件夹。

从您的版本控制中查看应用程序源

  1. 在欢迎屏幕上单击从 VCS 获取。或者，选择文件 | 来自版本控制或<Your_VCS> 的项目 | 从主菜单中获取版本控制。

    <Your_VCS> 代表与您当前打开的项目相关联的版本控制系统。

  2. 在打开的对话框中，从列表中选择您的版本控制系统并指定要从中签出应用程序源的存储库。有关详细信息，请参阅签出项目（克隆）。

项目安全

当您打开在 PhpStorm 外部创建并导入其中的项目时，PhpStorm 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。

不受信任的项目警告

选择以下选项之一：

  • 在安全模式下预览：在这种情况下，PhpStorm 以“预览模式”打开项目，这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试项目。

    PhpStorm 在编辑器区域顶部显示通知，您可以单击Trust project链接并随时加载您的项目。

  • 信任项目：在这种情况下，PhpStorm 打开并加载一个项目。这意味着项目已初始化，项目的插件已解决，依赖项已添加，并且所有 PhpStorm 功能都可用。

  • 不要打开：在这种情况下，PhpStorm 不会打开项目。

从项目安全中了解更多信息。

tip

从欢迎屏幕或通过File |创建的项目 新 | 创建项目中所述的项目被自动视为受信任。

选择 JavaScript 语言版本

为了获得可靠和高效的编码帮助，您需要指定默认情况下将在项目的所有 JavaScript 文件中使用的语言版本。

使用多个 JavaScript 版本

如果您正在开发同时使用 ECMAScript 5.1 和更新版本的 ECMAScript 的应用程序，最简单的方法是从JavaScript 页面上的列表中选择整个项目的最高语言版本。

JavaScript 代码中的 JSX 语法

如果您在 JavaScript 代码中使用 JSX 语法，请启用ECMAScript 6+。

下载项目依赖

如果您的应用程序使用一些工具、库或框架，请下载所需的包。要管理您的项目依赖项，您可以使用npm、Yarn 1或Yarn 2，有关详细信息，请参阅npm 和 Yarn。

在空项目中安装包

  • 在嵌入式终端( Alt+F12) 中，键入：

    npm install <package name>.

如果您的项目中已经有 package.json 文件

  • 在编辑器或项目工具窗口中右键单击package.json文件，然后从上下文菜单中选择运行“npm install” 。

  • 或者，npm install在终端 Alt+F12中运行。

note

在开始之前，请确保您的计算机上有Node.js。

为项目依赖项配置代码完成

为了为项目依赖提供代码补全，PhpStorm 自动创建一个node_modules库。在 PhpStorm 中，库是一个文件或一组文件，除了 PhpStorm 从您编辑的项目代码中检索到的函数和方法之外，其函数和方法被添加到 PhpStorm 的内部知识中。有关详细信息和示例，请参阅配置 JavaScript 库和代码完成。

查看镶嵌提示

嵌入提示出现在编辑器中，并为您提供有关代码的其他信息，以使其更易于阅读。

启用镶嵌提示

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S)，转到编辑器 | 嵌入提示，然后选中JavaScript旁边的复选框。

  2. 在下面的JavaScript页面上，指定您希望 PhpStorm 显示的提示和上下文。

参数提示

参数提示显示方法和函数中的参数名称，使您的代码更易于阅读。默认情况下，参数提示仅显示为文字或函数表达式的值，而不显示命名对象。

JavaScript 中的参数提示

配置参数提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | JavaScript。

  2. 从列表中选择参数提示，确保选中显示参数提示复选框，然后指定要显示参数提示的上下文。

    下面的预览显示了您在设置中所做的更改如何影响代码外观。

  3. 对于某些方法和函数，PhpStorm 不会在任何上下文中显示参数提示。单击排除列表...查看这些方法和函数，可能为它们启用参数提示，或将新项目添加到列表中。

tip

要隐藏所有类型值的参数提示，请清除显示参数名称提示复选框。从参数信息了解更多 信息。

返回类型提示

链式方法的返回类型提示是从JSDoc 注释或基于代码的静态分析推断出来的。默认情况下，返回类型提示会显示为在多行之间拆分并返回至少 2 种不同类型的链式方法。

链式方法的返回类型

配置方法返回类型提示

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | JavaScript。

  2. 从列表中选择调用链中的方法返回类型，确保选中显示提示复选框，然后指定要显示返回类型提示的调用链中不同类型的最小数量。

    下面的预览显示了您在设置中所做的更改如何影响代码外观。

类型注释

类型注释在其定义旁边显示变量类型或函数返回类型。类型注释是从JSDoc 注释或代码的静态分析中推断出来的。

JavaScript 中的类型注释

配置类型注解

  1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | JavaScript。

  2. 从列表中选择类型注释，确保选中显示类型提示复选框，然后指定要显示类型提示的上下文。

    下面的预览显示了您在设置中所做的更改如何影响代码外观。

JavaScript 中的自动导入

PhpStorm 可以为模块、类、组件和任何其他导出的符号生成导入语句。当您完成 ES6 符号或 CommonJS 模块时，PhpStorm 可以动态添加缺少的导入语句。PhpStorm 要么决定导入语句本身的样式，要么显示一个弹出窗口，您可以在其中选择所需的样式。

添加 ES6 导入语句

如果您将项目中的符号导入到作为 ES6 模块或已经包含 ES 导入语句的文件中，PhpStorm 会在符号完成时自动插入 ES6 导入。

https://resources.jetbrains.com/help/img/idea/2021.3/ws_es6_auto-import_light.png
Gif

对于早期的 JavaScript 版本或禁用完成时自动导入时，PhpStorm 会将符号标记为未解析并显示带有建议快速修复的工具提示：

快速修复自动导入：信息工具提示

或者，按Alt+Enter：

快速修复自动导入：建议列表

如果有多个可能的导入来源，PhpStorm 会显示一个建议列表：

快速修复自动导入：多种选择

从选择 JavaScript 语言版本中了解更多信息。

PhpStorm 还可以为项目依赖项中定义的符号生成导入语句。自动导入适用于包含TypeScript 定义文件（如在moment或redux中）或编写为 ES 模块的源的包中的符号。

如果当前文件已经包含 ES6 导入语句，PhpStorm 也会以 ES6 样式插入一个新语句。

https://resources.jetbrains.com/help/img/idea/2021.3/ws_auto_import_from_node_modules.png
Gif

添加 CommonJS（需要）导入语句

如果您将项目中的符号导入到已经是 CommonJS 模块的文件中（使用require语句 or module.export），PhpStorm 会在符号完成时自动插入 CommonJS 导入。

https://resources.jetbrains.com/help/img/idea/2021.3/ws_js_auto_import_common_js.png
Gif

或者，将插入符号放在要导入的符号上，按Alt+Enter，然后选择具有 CommonJS ( require) 导入样式的快速修复。

快速修复：选择导入样式

note

当 PhpStorm 不确定文件中应该使用什么语法时，它会显示一个弹出窗口，您可以在其中选择使用 ES6 和 CommonJS 语法。

配置自动导入

配置语法高亮

您可以根据自己的喜好和习惯配置 JavaScript 感知语法突出显示。

在浏览器中运行 JavaScript

调试 JavaScript

PhpStorm 为您的客户端 JavaScript 代码提供了一个内置调试器，可与Chrome或Chrome系列的任何其他浏览器一起使用。使用 PhpStorm，您可以调试在内置服务器、外部服务器或远程服务器上运行的 JavaScript 应用程序。有关详细信息，请参阅在 Chrome 中调试 JavaScript。