# JavaScript > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). 借助 IntelliJ IDEA，可以使用 JavaScript 开发现代 web、移动和桌面应用程序。 功能的可用性取决于订阅类型： IntelliJ IDEA: JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 [代码补全](auto-completing-code.html)， [错误和语法高亮](#ws_js_syntax_highlighting)、格式化、 [代码检查](code-inspection.html)和 [快速修复](null)，以及 [常见和 JavaScript 特定的重构](specific-javascript-refactorings.html)。 IntelliJ IDEA 还集成了 [JavaScript linter](linters.html)。 具有 Ultimate 订阅的 IntelliJ IDEA: JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 [代码补全](auto-completing-code.html)， [错误和语法高亮](#ws_js_syntax_highlighting)、格式化、 [代码检查](code-inspection.html)和 [快速修复](null)，以及 [常见和 JavaScript 特定的重构](specific-javascript-refactorings.html)。 IntelliJ IDEA 还集成了 [JavaScript linters](linters.html) 和 [Flow type checker](using-the-flow-type-checker.html)。 借助内置调试器，您可以调试客户端和服务器端代码，甚至可以在 [交互调试控制台](interactive-debugger-console.html)中运行 JavaScript 代码段。 请注意，IntelliJ IDEA 仅支持在 Chrome 或 Chrome 系列的其他浏览器中调试 JavaScript。 了解更多 [在 Chrome 中调试 JavaScript](debugging-javascript-in-chrome.html)。 IntelliJ IDEA 与 [Jest](running-unit-tests-on-jest.html)、 [Karma](running-unit-tests-on-karma.html)、 [Protractor](protractor.html)、 [Cucumber](running-cucumber-js-unit-tests.html) 和 [Mocha](running-unit-tests-on-mocha.html) 测试框架集成。 IntelliJ IDEA 支持运行和调试测试，并支持在测试和受测对象之间或失败的测试与导致问题的代码片段之间进行导航。 在此页面上，您将找到一个简短的入门指南，它将一步步引导您从创建 Web 应用程序到调试和测试。 ## 开始之前 Procedure: 启用 JavaScript 和 TypeScript 插件 此功能性依赖于 JavaScript 和 TypeScript 插件，该插件默认在 IntelliJ IDEA 中捆绑并启用。 如果相关功能不可用，请确保您没有禁用插件。 1. 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择 `插件` 。 2. 找到 JavaScript 和 TypeScript 插件，然后点击 启用 。 ## 创建一个新应用程序 从 IntelliJ IDEA 2024.1 版本开始， 新建项目 向导不再提供创建具有通用静态网页结构的 JavaScript 项目（或模块）的选项。 使用可用选项之一来创建更具体的结构，或创建一个空项目，并根据偏好设置和需求进行填充。 Procedure: 1. 点击 新建项目 屏幕上的 欢迎 或从主菜单中选择 `文件 | 新建 | 项目` 。 2. 在打开的 新建项目 对话框中，选择以下选项之一以创建具有特定框架结构的项目，然后在右侧窗格填写字段： * [HTML](editing-html-files.html) * [React](react.html) * [Express](developing-node-js-applications.html) * [Angular CLI](angular.html) * [Vue.js](vue-js.html) * [Vite](vite.html)。 * [Nuxt](nuxt.html) 或者，选择 空项目 并根据需要进行填充。 ## 从现有的 JavaScript 应用程序开始 如果您打算继续开发一个现有的 JavaScript 应用程序，请在 IntelliJ IDEA 中打开它， [选择要使用的 JavaScript 版本](#ws_js_choose_language_version)，并配置其中的库。 可选地 [下载所需的 npm 依赖项](#ws_js_download_npm_dependencies)。 Procedure: 打开本机上已有的应用程序源代码 * 点击 打开或导入 屏幕上的 欢迎 或从主菜单中选择 `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。 Procedure: 从版本控制系统检出应用程序源代码 1. 在 欢迎 屏幕上点击 克隆存储库 。 或者，从主菜单中选择 `文件 | 新建 | 从版本控制创建项目…` 、 `Git | 克隆…` 或 `VCS | 从版本控制获取` 。 在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是 Git 。 例如， Mercurial 或 Perforce 。 2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。 ### 项目安全 打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。 请选择以下选项之一： * 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。 * 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。 * 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。 有关更多信息，请参阅 [项目安全](project-security.html)。 > **Tip:** > 从欢迎屏幕或通过 `文件 | 新建 | 项目` 创建的项目会被自动视为受信任。 ## 选择 JavaScript 语言版本 要获得可靠高效的编码支持，您需要指定将在项目的所有 JavaScript 文件中默认使用的语言版本。 Procedure: 1. 在 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `语言与框架 | JavaScript` 。 [JavaScript 页面](settings-languages-javascript.html)打开。 2. 从列表中选择支持的 JavaScript 语言版本之一： * [ECMAScript 5.1](http://www.ecma-international.org/ecma-262/5.1/) * [ECMAScript 6+](http://www.ecma-international.org/ecma-262/6.0/)：此版本增加了对 ECMAScript 2015-2020 中引入的特性以及 JSX 语法的支持，并且还支持一些当前的标准提案。 * [Flow](https://flow.org/)：此版本增加了对 Flow 语法的支持。 ### 使用多个 JavaScript 版本 如果您正在开发一个同时使用 ECMAScript 5.1 和更新版本 ECMAScript 的应用程序，最简单的方法是从 [JavaScript 页面](settings-languages-javascript.html)（ `设置 | 语言与框架 | JavaScript` ）的列表中为整个项目选择最高的语言版本。 Procedure: 1. 在 [JavaScript 页面](settings-languages-javascript.html)，点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg)旁边的 JavaScript 语言版本 列表。 JavaScript 语言版本 对话框打开。 2. 点击 ![添加](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，在打开的对话框中选择 您 需要自定义语言版本的文件夹。 IntelliJ IDEA 将您带回显示所选文件夹的 JavaScript 语言版本 对话框，在 路径 字段中显示。 3. 从 语言 列表中选择所选文件夹中的文件的语言版本。 在项目中的所有其他 JavaScript 文件中，IntelliJ IDEA 将使用在 [JavaScript 页面](settings-languages-javascript.html)上选择的版本。 ![选择单独文件夹的语言版本](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_choose_language_version.png) ### JavaScript 代码中的 JSX 语法 如果您在 JavaScript 代码中使用 JSX 语法，请启用 ECMAScript 6+ 。 Procedure: * 在 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，转到 `语言与框架 | JavaScript` ，并从 JavaScript 语言版本 列表中选择 ECMAScript 6+ 。 * 若要在误用 JSX 语法时收到警告，请打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `编辑器 | 检查` ，并在 JavaScript 与 TypeScript | 常规 节点下启用 使用了 JSX 语法 检查。 使用搜索字段定位检查。 ![启用 React JSX 语法检查](https://resources.jetbrains.com/help/img/idea/2026.3/ws_choose_language_version_jsx.png) 也可以配置检查严重程度和作用域。 了解更多 [代码检查](code-inspection.html)。 ## 下载项目依赖项 如果您的应用程序使用了一些工具、库或框架，请下载所需的包。 要管理您的项目依赖项，您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm and Yarn](installing-and-removing-external-software-using-node-package-manager.html)。 Procedure: 在空项目中安装包 * 在命令行 shell 或嵌入式 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入： `npm install ` . Procedure: 如果您的项目中已经有一个 package.json 文件 * 右键点击编辑器或 项目 工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中的 `package.json` 文件，然后从上下文菜单中选择 运行 'npm install' 。 * 或者， 在 `npm install` 中运行 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))。 > **Note:** > 在开始之前，请确保您的电脑上安装了 [Node.js](http://nodejs.org/)。 ## 配置项目依赖的代码补全 为了为项目依赖项提供代码补全功能，IntelliJ IDEA 会自动创建一个 node_modules 库。 在语言和集成开发环境（IDE）的上下文中， library 是一个文件或一组文件。 除了 IntelliJ IDEA 从您编辑的项目代码中检索到的函数和方法之外，这些文件的函数和方法还会添加到 IntelliJ IDEA 的内部知识中。 如需更多信息，请参阅 [配置 JavaScript 库](configuring-javascript-libraries.html)和 [代码补全](auto-completing-code.html)。 ## 查看内嵌提示 嵌入提示会显示在编辑器中，并提供有关代码的附加信息，使代码更易于阅读和导航。 ### 参数提示 形参提示 会显示方法和函数中的形参名称，使代码更易于阅读。 默认情况下，参数提示仅针对文字值或函数表达式显示，不针对命名对象显示。 ![JavaScript 中的参数提示](https://resources.jetbrains.com/help/img/idea/2026.3/ws_javascript_parameter_hints.png) Procedure: 配置参数提示 1. 打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到 `编辑器 | 内嵌提示` 。 2. 展开 JavaScript 下的 参数名称 。 3. 通过选择相应的复选框指定您希望显示参数提示的上下文。 预览显示了您在设置中所做的更改如何影响代码外观。 4. 对于某些方法和函数，IntelliJ IDEA 在任何情况下都不会显示参数提示。 请点击 排除列表... 查看这些方法和函数，可能启用参数提示，或者向列表中添加新项目。 5. 要隐藏任意上下文中任意值类型的参数提示，请取消选中 JavaScript 复选框下的 参数名称 。 ### 返回类型提示 IntelliJ IDEA 可以在函数调用和调用链中显示函数返回值类型。 * 函数返回值类型提示 根据 [JSDoc 注释](creating-jsdoc-comments.html) 或代码的静态分析推断。 * 如果方法调用拆分在多行之间并且返回至少 2 种不同类型，则会显示 方法链中的返回值类型提示 。 方法链中的返回类型提示由内部 IntelliJ IDEA 评估器提供。 Procedure: 配置方法返回类型提示 1. 打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到 `编辑器 | 内嵌提示` 。 2. 在 类型 下，展开 JavaScript 节点，然后选中 函数／方法返回值类型 复选框。 3. 要在方法链中显示返回值类型提示，请展开 方法链 节点并选中 JavaScript 复选框。 预览显示了您在设置中所做的更改如何影响代码外观。 ### 类型提示 类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 形参的类型提示会显示在函数调用中。 类型提示根据 [JSDoc 注释](creating-jsdoc-comments.html) 或代码的静态分析推断得出。 ![JavaScript 中的类型注解](https://resources.jetbrains.com/help/img/idea/2026.3/ws_type_hints_annotations.png) Procedure: 配置类型提示 1. 打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到 `编辑器 | 内嵌提示` 。 2. 在类别树中展现 `类型 | JavaScript` 。 3. 指定要显示类型提示的上下文。 预览显示了您在设置中所做的更改如何影响代码外观。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_type_annotations_javascript.mp4) 4. 若要隐藏在任何上下文中任何值类型的参数类型提示和返回类型提示，请取消选中 JavaScript 复选框 类型 。 ## 添加 import 语句表述有点别扭，要 JSON only. Actually final should not have warning. I already in final? Oops I'm in final channel with malformed? It output prefix? Need final now proper. Can I overwrite? final channel only once? Actually I typed. Need finish valid JSON. Let's craft entire valid JSON. Ensure no comments. Need no Chinese explanation. Use IntelliJ IDEA 可以生成模块、类、组件以及任何其他导出的符号的导入语句。 可以在补全符号时实时添加 import 语句，也可以稍后通过导入工具提示、快速修复或意图操作添加。 有关更多信息，请参阅 [自动导入](creating-and-optimizing-imports.html)。 IntelliJ IDEA 可以生成 [ES6](#ws_js_auto_import_es6_module)或 [CommonJS](#ws_js_auto_import_common_js) 风格的 import 语句。 IntelliJ IDEA 会自行决定 import 语句的风格，或显示一个弹出窗口，供选择所需的风格。 如果 IntelliJ IDEA 无法自动确定文件中应使用哪种语法，会显示一个弹出窗口，可在其中选择使用 ES6 或 CommonJS 语法。 ![快速修复：选择导入样式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_auto_import_select_style_popup.png) 若要始终在代码补全时自动添加 ES6 import 语句，请打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `编辑器 | 常规 | 自动导入` ，并在 TypeScript / JavaScript 区域中选中 自动添加 JavaScript import 复选框。 ### 添加 ES6 import 语句 可以在补全符号时实时添加 import 语句，也可以稍后通过导入工具提示、快速修复或意图操作添加。 补全时自动导入: Procedure: 如果您从项目中导入符号到一个 ES6 模块文件或已经包含 ES 导入语句的文件中，IntelliJ IDEA 会在符号补全时自动插入 ES6 导入。 ![在代码补全时添加 ES6 导入](https://resources.jetbrains.com/help/img/idea/2026.3/ws_es6_auto-import.animated.gif) 使用自动导入工具提示: Procedure: 当鼠标悬停在未解析的符号上时，会显示自动导入工具提示，并建议添加 import 语句。 * 要接受建议，请按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))。 ![通过自动导入工具提示添加 ES6 import](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_auto_import_es6_module_tooltip.png) * 若要禁用该工具提示，请将鼠标悬停在编辑器右上角的检查微件上，点击 ![更多](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)，然后清除 显示自动导入工具提示 选项。 ![禁用自动导入工具提示](https://resources.jetbrains.com/help/img/idea/2026.3/ws_disable_import_pop_up.png) 使用快速修复或意图操作: Procedure: 对于较早的 JavaScript 版本，或当 [补全时自动导入已禁用](creating-and-optimizing-imports.html#disable-imports) 时，IntelliJ IDEA 会将符号标记为未解析，并显示一个弹出窗口，其中包含错误说明和建议的快速修复： * 接受建议。 ![使用快速修复的自动导入：信息提示](https://resources.jetbrains.com/help/img/idea/2026.3/ws_es6_autoimport_off_tooltip.png) * 或者，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))： ![自动导入快速修复：建议列表](https://resources.jetbrains.com/help/img/idea/2026.3/ws_es6_autoimport_off.png) * 如果有多个可能的导入来源，IntelliJ IDEA 将显示建议列表： ![快速修复的自动导入：多种选择](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_import_quick_fix_multiple_choices.png) IntelliJ IDEA 还可以为项目依赖项中定义的符号生成 import 语句。 自动导入功能适用于包含 [TypeScript 定义文件](https://github.com/Microsoft/TypeScript/tree/master/lib)的软件包中的符号（如 [moment](https://www.npmjs.com/package/moment)或 [redux](https://www.npmjs.com/package/redux)）或作为 ES 模块编写的源代码。 如果当前文件已经包含一个 ES6 import 语句，IntelliJ IDEA 插入一个新的也是 ES6 风格的。 ![从项目依赖项自动导入](https://resources.jetbrains.com/help/img/idea/2026.3/ws_auto_import_from_node_modules.animated.gif) ### 添加 CommonJS（require）导入语句 如果您在将符号从项目导入到已经是 CommonJS 模块（具有 `require` 语句或 `module.export` ）的文件中，IntelliJ IDEA会在符号完成时自动插入一个 CommonJS 导入。 ![使用 CommonJS import 语句自动导入](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_auto_import_common_js.animated.gif) 或者，将文本光标放置在要导入的符号处，按 `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS))，并选择一种使用 CommonJS（ `require` ）导入样式的快速修复。 ![快速修复：选择导入样式](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_auto_import_quick_fix_select_import_style.png) ### 添加 import defer 语句 IntelliJ IDEA 在 JavaScript 上下文中支持 [import defer](https://github.com/tc39/proposal-defer-import-eval/) 语法，提供代码补全、错误高亮、用于 `import` 语句的实时模板以及用法搜索。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_import_defer.mp4) 还支持 `import.defer` 语法： [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_await_import_defer.mp4) > **Note:** > 命名导入、默认导入以及 `类型` 和 `defer` 的组合不受 `import defer` 语法支持。 ### 添加 import source 语句 IntelliJ IDEA 在 JavaScript 上下文中支持 [import source](https://github.com/tc39/proposal-source-phase-imports) 语法，提供代码补全、错误高亮、用于 `import` 语句的实时模板以及用法搜索。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_import_source.mp4) 还支持 `import.source` 语法： [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_await_import_source.mp4) > **Note:** > * 命名导入、命名空间导入以及 `类型` 和 `source` 的组合不受 `import source` 语法支持。 > > * 若要将 `import source` 语法与 babel 结合使用，请安装 [@babel/plugin-syntax-import-source 插件](https://babeljs.io/docs/babel-plugin-syntax-import-source)。 ### 配置自动导入 Procedure: 1. 若要始终在代码补全时自动添加 ES6 import 语句，请打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `编辑器 | 常规 | 自动导入` ，并在 TypeScript / JavaScript 区域中选中 自动添加 JavaScript import 复选框。 2. 若要配置 `import` 语句的外观，请打开 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `编辑器 | 代码样式 | JavaScript` ，并使用 导入 选项卡中的控件。 有关详细信息，请参阅 [Imports 选项卡](settings-code-style-javascript.html#ws_js_settings_editor_code_style_imports_tab)。 ## 配置语法高亮 您可以根据您的偏好和习惯配置 JavaScript 语法高亮显示。 Procedure: 1. 在 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `Editor | Color Scheme | JavaScript` 。 2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。 ## 重新格式化代码 IntelliJ IDEA 允许您根据当前的 [代码样式方案](configuring-code-style.html#configure-code-style-schemes)重新格式化 JavaScript 代码。 您还可以在 [.editorconfig](null) 中指定格式设置，或使用 [Prettier](prettier.html)。 ### 装饰器 对于装饰器，在重新格式化期间抑制在每个装饰器后插入换行可能很重要。 以下是装饰器的可用格式设置选项： #### 不换行 选中此选项后，重新格式化包含装饰器的行时不会应用换行。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_class_decorator_do_not_wrap.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_do_not_wrap_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_do_not_wrap_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_do_not_wrap_function_parameter_decorators.mp4) #### 过长时换行 选择此选项时，如果行超出右边距，则会换行。 右边距在 硬换行位置 字段中定义，位于 [设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号](settings-code-style-javascript.html#ws_js_settings_editor_code_style_wrapping_and_braces_tab) 中。 如果行超出指定的数字，则会换行。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_class_decorator_wrap_if_long.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_if_long_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_if_long_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_if_long_function_parameter_decorators.mp4) #### 过长时分行 选择此选项时，如果装饰器超出右边距，将每行格式化一个装饰器。 #### 始终换行 选择此选项时，所有装饰器将每行格式化一个。 类装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_class_decorator_wrap_always.mp4) 方法装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_always_class_method_decorators.mp4) 字段装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_always_class_field_decorators.mp4) 函数参数装饰器: [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_reformat_code_decorators_wrap_always_function_parameter_decorators.mp4) ## 在浏览器中运行 JavaScript Procedure: 1. 在编辑器中，打开带有 JavaScript 引用的 HTML 文件。 此 HTML 文件不一定是实现应用程序起始页的文件。 2. 请执行以下操作之一： * 从主菜单中选择 `查看 | 在浏览器中打开` 或按 `Alt+F2` (Windows), `⌥ F2` (macOS), `⌥ F2` (IntelliJ IDEA Classic (macOS)), `⌥ F2` (macOS System Shortcuts), `Alt+F2` (XWin), `Alt+F2` (GNOME), `Alt+F2` (KDE), `Alt+F2` (Emacs), `Alt+F2` (Sublime Text), `Alt+F2` (Sublime Text (macOS)), `Alt+F2` (Visual Studio), `⌥ F2` (Visual Studio (macOS)), `Alt+F2` (NetBeans), `Alt+F2` (Eclipse), `⌥ F2` (Eclipse (macOS))。 然后从列表中选择所需的浏览器。 * 将鼠标悬停在代码上以显示浏览器图标栏： ![the IntelliJ IDEA 图标](https://resources.jetbrains.com/help/img/idea/2026.3/product.idea.svg) ![Chrome](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.chrome.svg) ![Firefox](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.firefox.svg) ![Safari](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.safari.svg) ![Opera](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.opera.svg) ![Internet Explorer](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.explorer.svg) ![Edge](https://resources.jetbrains.com/help/img/idea/2026.3/app.xml.browsers.edge.svg)。 点击指示所需浏览器的图标。 ## 调试 JavaScript IntelliJ IDEA 提供了一个内置调试器，用于调试您的客户端 JavaScript 代码，兼容 Chrome 或其他 Chrome 系列浏览器。 使用 IntelliJ IDEA，您可以调试在内置服务器、外部服务器或远程服务器上运行的 JavaScript 应用程序。 如需更多信息，请参阅 [在 Chrome 中调试 JavaScript](debugging-javascript-in-chrome.html)。