IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. JavaScript

最终的
JavaScript

最后修改时间：2023 年 10 月 11 日

Required plugin:

Javascript and TypeScript -  The plugin is available only in IntelliJ IDEA Ultimate, where it is enabled by default.

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

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

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

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

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

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

在你开始之前

确保在设置中启用JavaScript 和 TypeScript插件。按CtrlAlt0S打开 IDE 设置，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入JavaScript 和 TypeScript。有关插件的更多信息，请参阅管理插件。

创建一个新的应用程序

从现有的 JavaScript 应用程序开始

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

打开计算机上已有的应用程序源

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

从版本控制中检查应用程序源

  1. 单击欢迎屏幕上的从 VCS 获取。

    或者，选择文件 | 新 | 来自版本控制或Git 的项目| 从主菜单克隆...。

    您可能会看到与您的项目关联的任何其他版本控制系统，而不是主菜单中的Git 。例如，Mercurial或Perforce。

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

项目安全

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

不可信项目警告

选择以下选项之一：

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

    IntelliJ IDEA 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。

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

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

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

tip

从欢迎屏幕或通过文件 |创建的项目 新 | 中描述的项目将自动被视为可信。

选择JavaScript语言版本

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

使用多个 JavaScript 版本

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

JavaScript 代码中的 JSX 语法

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

下载项目依赖项

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

在空项目中安装包

  • 在嵌入式终端( AltF12) 中，键入：

    npm install <package name>。

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

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

  • 或者，npm install在终端 AltF12中运行。

note

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

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

为了为项目依赖项提供代码补全，IntelliJ IDEA 会自动创建一个node_modules库。在语言和 IDE 的上下文中，库是一个文件或一组文件。除了 IntelliJ IDEA 从您编辑的项目代码中检索的函数和方法之外，这些文件的函数和方法也添加到 IntelliJ IDEA 的内部知识中。有关更多信息，请参阅配置 JavaScript 库和代码完成。

查看嵌入提示

在编辑器中嵌入提示，为您提供有关代码的附加信息，从而更容易阅读和导航。

参数提示

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

JavaScript 中的参数提示

配置参数提示

  1. “设置”对话框 ( ) 并转到编辑器 |打开镶嵌提示。CtrlAlt0S

  2. 展开参数名为下一个JavaScript。

  3. 通过选择相应的前置来指定要显示参数提示的上下文。

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

  4. 对于某些方法和函数，IntelliJ IDEA 不会在任何上下文中显示参数提示。取消排除列表...查看这些方法和函数，可能为它们获取参数提示，或者将新项目添加到列表中。

  5. 要隐藏上下文中任何值类型的参数提示，请清除参数名称下面的JavaScript表单。

返回类型提示

IntelliJ IDEA 可以在函数调用和调用链中显示函数返回类型。

  • 返回函数类型提示来自JSDoc 注释或基于代码的静态分析推断出来的。

  • 如果方法调用分成多行并返回至少2种不同的类型，底部显示方法链中的返回类型提示。

配置方法返回类型提示

  1. “设置”对话框 ( ) 并转到编辑器 |打开镶嵌提示。CtrlAlt0S

  2. 在“类型”下，展开“JavaScript”节点，然后选中“函数返回类型”队列。

  3. 要在方法链中显示返回类型提示，请展开方法链元素并选中JavaScript表单。

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

类型提示

类型提示显示变量、字段或参数的类型。变量和字段的类型显示在其定义旁边。参数的类型提示显示在函数调用中。类型提示是从JSDoc 注释或代码的静态分析中推断出来的。

JavaScript 中的类型注释

配置类型注释

  1. “设置”对话框 ( ) 并转到编辑器 |打开镶嵌提示。CtrlAlt0S

  2. 在类别树中，展开类型 | JavaScript .

  3. 展开类型注释节点并指定要显示类型提示的上下文。

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

    JavaScript 类型注释

  4. 要隐藏上下文中任何值类型的参数参数和返回类型提示，请清除Types下的JavaScript类型。

在 JavaScript 中自动导入

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

添加ES6导入语句

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

对于早期完成的 JavaScript 版本或取消时自动导入时，IntelliJ IDEA 将符号标记为未解析，并显示标记建议的快速修复的工具提示：

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

或者，按：AltEnter

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

如果有多个可能的导入源，IntelliJ IDEA 会显示一系列建议：

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

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

如果当前文件已包含 ES6 导入语句，IntelliJ IDEA 或以 ES6 样式插入一个新语句。

/help/img/idea/2023.2/ws_auto_import_from_node_modules.png
动图

添加 CommonJS (require) 导入语句

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

/help/img/idea/2023.2/ws_js_auto_import_common_js.png
动图

或者，将插入符号放在要选择导入的符号处，按，然后用 CommonJS ( ) 导入样式的快速修复。AltEnterrequire

快速修复：选择导入样式

笔记

当 IntelliJ IDEA 无法自动定义文件中应用的语法时，它会显示一个弹出窗口，您可以在其中选择使用 ES6 和 CommonJS 语法。

配置自动导入

配置语法高亮

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

在浏览器中运行 JavaScript

调试 JavaScript

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