GoLand 2025.2 Help

JavaScript

使用 GoLand,您可以使用 JavaScriptNode.js 开发现代 Web、移动和桌面应用。

GoLand 还支持 ReactAngularVue.js 等框架,并与各种 Web 开发工具深度集成。

JavaScript 感知的编码辅助功能包括关键字、标签、变量、参数和函数的 补全错误和语法高亮 、格式化、 代码检查快速修复 ,以及 通用和 JavaScript 专属重构。 GoLand 还可与 JavaScript linterFlow 类型检查器 集成。

通过内置调试器,您可以调试客户端和服务端代码,甚至可以在 交互式调试控制台 中运行 JavaScript 代码片段。

GoLand 可与 JestKarmaProtractorCucumberMocha 测试框架集成。 GoLand 支持运行和调试测试,还支持在测试与被测对象或失败测试与引发问题的代码片段之间进行导航。

在此页面,您将找到一份简单的入门指南,指导您逐步完成从创建 Web 应用到调试和测试的过程。

开始之前

请确保在设置中启用了 JavaScript and TypeScript 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 单击 已安装 选项卡。 在搜索字段中输入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 管理插件

创建新应用

GoLand 可创建基础 JavaScript 项目,便于您用最少配置设置项目。 生成的项目包含一个 package.json 和一个带有 console.log() 欢迎消息的 index.js 文件,您还可以生成一个示例 Web 应用程序。

默认情况下,GoLand 会自动创建 Git 存储库,并 将生成的源代码置于 Git 管控之下

  1. 在主菜单中点击 文件|新建|项目。 或者,在欢迎界面点击 新建|项目

  2. 在左侧面板中,选择以下选项之一:

    • Bootstrap

    • HTML 5 Boilerplate

    • React

    • React Native

    要查看 Angular、Node.js、Vue.js 的项目选项,请安装并启用相应插件。

  3. 在右侧面板中,选择 JavaScript ,然后指定项目相关文件将要存储到的文件夹路径。

  4. 要生成示例 Web 应用程序,请选中 生成包含入门提示的 playground 项目 复选框。 GoLand 会基于 Vite 模板创建项目,并提供提示以确保顺利入门。

  5. 点击 创建

    创建基本 JavaScript 项目

从现有 JavaScript 应用开始

如果您要继续开发一个已有的 JavaScript 应用,请在 GoLand 中打开它, 选择要使用的 JavaScript 版本 ,并配置相关库。 可选地 下载所需的 npm 依赖

打开已在本机上的应用源代码

  • 欢迎 屏幕中点击 打开 ,或从主菜单选择 文件|打开。 在打开的对话框中选择存储源代码的文件夹。

从版本控制中检出应用源代码

  1. 欢迎 屏幕点击 克隆

    或者,从主菜单选择 Git| 克隆…版本控制|从版本控制获取

    主菜单中可能会显示与您的项目关联的其他版本控制系统,代替 Git。 例如, MercurialPerforce

    check_out_from_vcs

项目安全性

当您打开一个在 GoLand 外部创建并导入的项目时,GoLand 会显示对话框,供您决定如何处理该包含未知源代码的项目。

不受信任的项目警告

请选择以下选项之一:

  • 在安全模式中预览 :在此情况下,GoLand 会以预览模式打开项目。 这意味着您可以浏览项目的源代码,但不能运行任务与脚本,或运行/调试项目。

    GoLand 会在编辑器区域顶部显示通知,您可以单击 信任项目… 链接随时加载项目。

  • 信任项目 :在此情况下,GoLand 会打开并加载项目。 这意味着项目已初始化,项目插件已解析,依赖项已添加,GoLand 的全部功能可用。

  • 不打开 :在此情况下,GoLand 不会打开项目。

详细信息请参阅 项目安全

选择 JavaScript 语言版本

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

  1. 设置 对话框(Ctrl+Alt+S )中,转到 语言和框架| JavaScript。 将打开 JavaScript 页面

  2. 从列表中选择一个受支持的 JavaScript 语言版本:

    • ECMAScript 5.1

    • ECMAScript 6+ :该版本增加了对 ECMAScript 2015–2020 中引入的特性、JSX 语法以及一些当前标准提案的支持。

    • Flow :该版本增加了对 Flow 语法的支持。

使用多个 JavaScript 版本

如果您正在开发的应用程序同时使用 ECMAScript 5.1 和更新版本的 ECMAScript,最简单的方式是在 JavaScript 页面设置|语言与框架|JavaScript )的列表中为整个项目选择最高的语言版本。

  1. JavaScript 页面中,点击 “浏览”按钮 按钮,该按钮位于 JavaScript 语言版本 列表旁边。 将打开 JavaScript 语言版本 对话框。

  2. 点击 添加 ,在打开的对话框中选择需要自定义语言版本的文件夹。 GoLand 将返回到 JavaScript 语言版本 对话框,此时所选文件夹将显示在 路径 字段中。

  3. 语言 列表中为所选文件夹中的文件选择语言版本。 对于项目中所有其他 JavaScript 文件,GoLand 将使用在 JavaScript 页面上选择的版本。

    为不同文件夹选择语言版本

JavaScript 代码中的 JSX 语法

如果您的 JavaScript 代码中使用了 JSX 语法,请启用 ECMAScript 6+

  • 设置 对话框(Ctrl+Alt+S )中,转到 语言和框架| JavaScript ,然后在 JavaScript 语言版本 列表中选择 ECMAScript 6+

  • 如需在错误使用 JSX 语法时收到警告,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器|检查 ,在 JavaScript 与 TypeScript|通用 节点下启用 使用的 JSX 语法 检查。 使用搜索字段查找该检查。

    启用 React JSX 语法检查

    您可以选择配置检查的严重程度和作用域。 详细了解 代码检查

下载项目依赖项

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

在空项目中安装软件包

  • 在嵌入式 终端Alt+F12 )中,键入:

    npm install <package name>

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

  • 在编辑器或 项目 工具窗口中右键点击 package.json 文件 Alt+1 ,然后从上下文菜单中选择 运行'npm install'

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

为项目依赖项配置代码补全

为了为项目依赖项提供代码补全,GoLand 会自动创建一个 node_modules 库。 在语言和 IDE 的上下文中, 是一个文件或一组文件。 这些文件中的函数和方法会被添加到 GoLand 的内部知识库中,以补充从项目编辑代码中获取的信息。

查看内联提示

内联提示会显示在编辑器中,为您的代码提供更多信息,帮助提升可读性和可导航性。

类型提示

类型提示 会显示变量、字段或参数的类型。 变量和字段的类型会显示在其定义旁边。 函数调用中会显示参数的类型提示。 类型提示通过 JSDoc 注释 或对代码进行静态分析来推导。

JavaScript 中的类型注解

配置类型注解

  1. 打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器|内嵌提示

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

  3. 展开 类型注解 节点并指定您希望显示类型提示的上下文。

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

    类型注解
  4. 要隐藏任何上下文中所有值类型的参数类型与返回类型提示,请取消选中 JavaScript 复选框(位于 类型 下)。

JavaScript 中的自动导入

GoLand 可为模块、类、组件或任何已导出的符号生成 import 语句。 当您补全 ES6 符号或 CommonJS 模块时,GoLand 会即时添加缺失的 import 语句。 GoLand 会自行决定 import 语句的样式,或显示一个弹出窗口供您选择所需的样式。

添加 ES6 import 语句

如果您将符号从项目导入到 ES6 模块或已包含 ES import 语句的文件中,GoLand 会在符号补全时自动插入 ES6 import。

对于较早版本的 JavaScript 或禁用了补全时自动导入,GoLand 会将符号标记为未解析并显示包含建议快速修复的工具提示:

自动导入与快速修复:信息提示

或者,按下 Alt+Enter

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

如果存在多个可能的导入来源,GoLand 会显示建议列表:

自动导入与快速修复:多个选项

GoLand 还可以为项目依赖项中定义的符号生成 import 语句。 自动导入适用于来自包含 TypeScript 定义文件 (例如 momentredux )的 package 中的符号,或采用 ES 模块编写的源码。

如果当前文件已包含 ES6 import 语句,GoLand 会以 ES6 风格插入新的语句。

从项目依赖项自动导入

添加 CommonJS(require)import 语句

如果您将项目中的符号导入到已经是 CommonJS 模块的文件中(包含 require 语句或 module.export ),GoLand 会在符号补全时自动插入 CommonJS import。

使用 CommonJS import 语句自动导入

或者,将插入符号的光标置于符号位置,按下 Alt+Enter ,然后选择带有 CommonJS(require )导入样式的快速修复操作。

快速修复:选择导入样式

添加 import defer 语句

GoLand 在 JavaScript 环境中支持 import defer 语法,提供代码补全、错误高亮、 import 语句的动态模板以及用法搜索功能。

还支持 import.defer 语法:

添加 import source 语句

GoLand 在 JavaScript 环境中支持 import source 语法,提供代码补全、错误高亮、 import 语句的动态模板以及用法搜索功能。

还支持 import.source 语法:

配置自动导入

  1. 若要在代码补全时自动添加 ES6 import 语句,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器|通用|自动导入 ,然后在 TypeScript / JavaScript 区域中选中 自动添加JavaScript import 复选框。

  2. 要配置 import 语句的外观,请打开 设置 对话框(Ctrl+Alt+S ),转到 编辑器|代码样式|JavaScript ,并使用 导入 标签中的控件。 详见 Imports 标签页

配置语法高亮

您可以根据偏好和习惯配置 JavaScript 语法高亮显示。

  1. 设置 对话框(Ctrl+Alt+S )中,转到 编辑器|配色方案|JavaScript

  2. 选择颜色方案,接受从默认方案继承的高亮设置,或按照 颜色与字体 中所述自定义。

重新格式化代码

GoLand 允许根据您当前的 代码样式方案 重新格式化 JavaScript 代码。

您也可以在 .editorconfig 中指定格式设置,或使用 Prettier

装饰器

对于装饰器,在重新格式化时抑制在每个装饰器后插入换行符可能很重要。

装饰器的可用格式选项如下:

不换行

选中此选项后,重新格式化带有装饰器的行时不会进行换行。

过长时换行

选中此选项后,如果代码行超出右侧边距,则进行换行。

右侧边距在 自动换行位置 字段中定义,位置为 设置 | 编辑器 | 代码样式 | JavaScript | 换行与大括号。 如果代码行超出指定值,则会进行换行。

过长时拆行

选中此选项后,如果超出右侧边距,装饰器将按每行一个的方式进行格式化。

始终换行

选中此选项后,所有装饰器将按每行一个的方式进行格式化。

在浏览器中运行 JavaScript

  1. 在编辑器中打开包含 JavaScript 引用的 HTML 文件。 此 HTML 文件不必是应用程序启动页所使用的文件。

  2. 请执行以下任一操作:

    • 从主菜单选择 视图| 在浏览器中打开(B) ,或按下 Alt+F2。 然后从列表中选择所需的浏览器。

    • 将鼠标悬停在代码上以显示浏览器图标栏: GoLand 图标 Chrome Firefox Safari Opera Internet Explorer Edge。 单击表示所需浏览器的图标。

调试 JavaScript

GoLand 提供适用于客户端 JavaScript 代码的内置调试器,可与 Chrome 或任何其他 Chrome 系列浏览器配合使用。 使用 GoLand,您可以调试在内置服务器、外部服务器或远程服务器上运行的 JavaScript 应用程序。 详情请参阅 在 Chrome 中调试 JavaScript

最后修改日期: 2025年 9月 26日