JavaScript
借助 PyCharm，您可以使用 JavaScript开发现代 Web、移动端和桌面应用程序。
功能的可用性取决于订阅类型：
JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 补全、 错误和语法高亮显示 、格式化、 代码检查 与 快速修复 ，以及 通用重构和 JavaScript 特定的重构。 PyCharm 还可与 JavaScript 检查工具集成。
JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 补全、 错误和语法高亮显示 、格式化、 代码检查 与 快速修复 ，以及 通用重构和 JavaScript 特定的重构。 PyCharm 还可与 JavaScript linter 和 Flow 类型检查器 集成。
借助内置调试器，您可以调试客户端和服务端代码，甚至可在 交互式调试器控制台 中运行 JavaScript 代码片段。 请注意，PyCharm 仅支持在 Chrome 或 Chrome 系列的其他浏览器中调试 JavaScript。 详细了解，请参阅 在 Chrome 中调试 JavaScript。
PyCharm 可与 Jest、 Karma、 Protractor、 Cucumber 和 Mocha 等测试框架集成。 PyCharm 支持运行和调试测试，并可在测试与被测对象之间，或在失败的测试与导致问题的代码片段之间进行导航。
在本页，您将找到一份简短的入门指南，按步骤引导您从创建 Web 应用程序到对其进行调试与测试。
在开始之前
请确保在设置中启用了 JavaScript and TypeScript 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 JavaScript 和 TypeScript。 有关插件的更多信息，请参见 管理插件。
创建新应用程序
PyCharm 可以创建一个基本的 JavaScript 项目，因此您只需进行最少的配置即可设置项目。 生成的项目包含一个 package.json 和一个带有 console.log() 欢迎消息的 index.js 文件，此外，您还可以另外生成一个示例 Web 应用程序。
默认情况下，PyCharm 会自动创建 Git 仓库，并 将生成的源代码置于 Git 版本控制之下。
在 欢迎屏幕 屏幕上点击 新建项目 ，或从主菜单中选择 。 新建 项目 对话框 打开。
在左侧窗格中，选择面向 JavaScript 应用程序开发的任一项目类型，例如 Angular CLI、AngularJS、React App 或 React Native。
在右侧窗格，指定用于存储项目相关文件的文件夹路径。
展开 更多设置 并指定其他必需的项目选项。
从现有 JavaScript 应用程序开始
如果您要继续开发现有的 JavaScript 应用程序，请在 PyCharm 中将其打开， 选择要使用的 JavaScript 版本 ，并配置其中的库。 您还可以选择 下载所需的 npm 依赖项。
打开您计算机上已有的应用源代码
在 欢迎屏幕 屏幕左侧窗格中点击 打开 ，或在主菜单中选择 。 在打开的对话框中，选择您的源代码所在的文件夹。
从您的版本控制系统中检出应用源代码
在 欢迎屏幕 屏幕左侧窗格中点击 克隆。
或者，从主菜单中选择 或 或 。
在主菜单中，您可能会看到与项目关联的其他任何版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用源代码的存储库。 欲了解详细信息，请参阅 检出项目（克隆）。
项目安全
当您打开在 PyCharm 之外创建并导入到其中的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉源代码的该项目。
选择以下选项之一：
在安全模式中预览 ：在这种情况下， PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也不能运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在这种情况下， PyCharm 打开并加载项目。 这意味着项目已初始化、项目插件已解析、已添加依赖项，并且所有 PyCharm 功能均可用。
不打开 ：在这种情况下， PyCharm 不打开项目。
在 项目安全 了解更多信息。
选择 JavaScript 语言版本
为了获得可靠且高效的编码辅助，您需要指定默认在项目的所有 JavaScript 文件中使用的语言版本。
在 设置 对话框（Ctrl+Alt+S ），转到 。 JavaScript 页面 将打开。
在列表中，选择支持的 JavaScript 语言版本之一：
ECMAScript 6+ ：该版本新增对 ECMAScript 2015-2020 引入的特性以及 JSX 语法的支持，并支持标准的一些当前提案。
Flow ：该版本新增对 Flow 语法的支持。
使用多个 JavaScript 版本
如果您正在开发的应用程序同时使用 ECMAScript 5.1 和较新的 ECMAScript 版本，最简单的方法是在 JavaScript 页面 （ ）的列表中为整个项目选择最高的语言版本。
在 JavaScript 页面 上，点击
，它位于 JavaScript 语言版本 列表旁边。 JavaScript 语言版本 对话框将打开。点击
，在随即打开的对话框中选择需要自定义语言版本的文件夹。 PyCharm 会将您带回 JavaScript 语言版本 对话框，所选文件夹会显示在 路径 字段中。在 语言 列表中，为所选文件夹中的文件选择语言版本。 在项目中的所有其他 JavaScript 文件中，PyCharm 将使用在 JavaScript 页面 上选择的版本。
JavaScript 代码中的 JSX 语法
如果您在 JavaScript 代码中使用 JSX 语法，请启用 ECMAScript 6+。
在 设置 对话框（Ctrl+Alt+S ）中，转到 ，然后在 JavaScript 语言版本 列表中选择 ECMAScript 6+。
若要在误用 JSX 语法时收到警告，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并在 JavaScript 与 TypeScript | 常规 节点下启用 使用 JSX 语法 检查。 使用搜索字段定位该检查。
可选地，配置检查的严重性和作用域。 了解详情请参阅 代码检查。
下载项目依赖项
如果您的应用程序使用某些工具、库或框架，请下载所需的包。 要管理项目依赖项，您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
在空项目中安装包
在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：
npm install <package name>。
如果您的项目中已有 package.json 文件
在编辑器或 项目 工具窗口（Alt+1 ）中，右键单击 package.json 文件，然后从上下文菜单中选择 运行 'npm install'。
或者，在 终端 Alt+F12 中运行
npm install。
为项目依赖项配置代码补全
为项目依赖项提供代码补全，PyCharm 会自动创建一个 node_modules 库。 在语言和 IDE 的上下文中， 库 是一个文件或一组文件。 除了 PyCharm 从您编辑的项目代码中获取的函数和方法之外，这些文件的函数和方法也会添加到 PyCharm 的内部知识库中。 更多信息，请参阅 配置 JavaScript 库 和 代码补全。
查看内联提示
内联提示会出现在编辑器中，并为您的代码提供附加信息，从而更易于阅读和导航。
参数提示
参数提示 会显示方法和函数中的参数名，使您的代码更易读。 默认情况下，仅对值为字面量或函数表达式的情况显示参数提示，而不对命名对象显示。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
展开 参数名称 下的 JavaScript。
通过选中相应的复选框，指定您希望显示参数提示的上下文。
预览会显示您在设置中所做更改如何影响代码的外观。
对于某些方法和函数，PyCharm 在任意上下文中都不显示参数提示。 点击 排除列表... 查看这些方法和函数，必要时为它们启用参数提示，或向列表添加新条目。
要在任何上下文中隐藏任意值类型的参数提示，请清除 参数名称 下的 JavaScript 复选框。
返回类型提示
PyCharm 可以在函数调用和调用链中显示函数返回类型。
函数返回类型提示 通过 JSDoc 注释 推断，或基于对您的代码的静态分析。
方法链中的返回类型提示 会在方法调用被拆分为多行且返回至少 2 种不同类型时显示。
方法链中的返回类型提示由 PyCharm 的内部求值器提供。
配置方法返回类型提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 类型 下展开 JavaScript 节点，然后选中 函数返回类型 复选框。
要在方法链中显示返回类型提示，展开 方法链 节点并选中 JavaScript 复选框。
预览会显示您在设置中所做更改如何影响代码的外观。
类型提示
类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 参数的类型提示显示在函数调用中。 类型提示从 JSDoc 注释 或对您的代码的静态分析中推断。
配置类型提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在类别树中，展开 。
指定要显示类型提示的上下文。
预览会显示您在设置中所做更改如何影响代码的外观。
要在任意上下文中隐藏任何值类型的参数类型和返回类型提示，请清除位于 类型 下的 JavaScript 复选框。
添加 import 语句
PyCharm 可以为模块、类、组件以及任何其他已导出的符号生成 import 语句。 可以在实时补全符号时或者稍后通过导入工具提示、快速修复或意图操作来添加导入语句。 在 自动导入 了解更多信息。
PyCharm 可生成 ES6 或 CommonJS 风格的导入语句。 PyCharm 会自行决定导入语句的样式，或显示一个弹出窗口，供您选择所需的样式。
如果 PyCharm 无法自动确定文件中应使用哪种语法，则会显示一个弹出窗口，您可以选择使用 ES6 还是 CommonJS 语法。
要在代码补全时始终自动添加 ES6 导入语句，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后在 TypeScript / JavaScript 区域中选中 自动添加 JavaScript import 复选框。
添加 ES6 import 语句
可以在实时补全符号时或者稍后通过导入工具提示、快速修复或意图操作来添加导入语句。
如果您将项目中的符号导入到一个 ES6 模块文件，或该文件已包含 ES import 语句，PyCharm 会在符号补全时自动插入 ES6 import。
当您将鼠标悬停在未解析的符号上时，会出现自动导入工具提示，建议添加导入语句。
要接受建议，请按 Alt+Enter。
要禁用工具提示，请将鼠标悬停在编辑器右上角的检查微件上，点击
，然后取消勾选 显示自动导入工具提示 选项。
对于较早的 JavaScript 版本或 禁用自动完成时导入功能的情况下，PyCharm 会将符号标记为未解析，并显示带有错误描述和建议快速修复的弹出窗口：
要接受建议，请按 Alt+Shift+Enter。
或者，按 Alt+Enter：
如果存在多个可能的导入来源，PyCharm 会显示建议列表：
PyCharm 还可以为项目依赖项中定义的符号生成 import 语句。 自动导入适用于包含 TypeScript 定义文件 （例如 moment 或 redux ）或以 ES 模块形式编写的源代码中的符号。
如果当前文件已包含 ES6 import 语句，PyCharm 也会以 ES6 样式插入新的语句。
添加 CommonJS（require） 导入语句
如果您将项目中的符号导入到一个已经是 CommonJS 模块（包含 require 语句或 module.export ），PyCharm 会在符号补全时自动插入 CommonJS 导入。
或者，将插入符号置于要导入的符号处，按 Alt+Enter ，并选择使用 CommonJS（require） 导入样式的快速修复。
添加 import defer 语句
PyCharm 在 JavaScript 上下文中支持 import defer 语法，并为 import 语句提供代码补全、错误高亮显示、实时模板以及用法搜索。
也支持 import.defer 语法：
添加 import source 语句
PyCharm 在 JavaScript 上下文中支持 import source 语法，并为 import 语句提供代码补全、错误高亮显示、实时模板以及用法搜索。
也支持 import.source 语法：
配置自动导入
要在代码补全时始终自动添加 ES6 导入语句，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后在 TypeScript / JavaScript 区域中选中 自动添加 JavaScript import 复选框。
要配置
import语句的外观，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并使用 导入 选项卡中的控件。 更多信息请参阅 导入选项卡。
配置语法高亮显示
您可以根据您的偏好和习惯配置 JavaScript 感知的语法高亮显示。
在 设置 对话框（Ctrl+Alt+S ），转到 。
选择配色方案，接受继承自默认设置的高亮设置，或按照 颜色与字体 中的说明对其进行自定义。
重新格式化代码
PyCharm 让您根据当前的 代码风格方案 重新格式化您的 JavaScript 代码。
您也可以在 .editorconfig 中指定格式设置，或使用 Prettier.
装饰器
对于装饰器，在重新格式化时，禁止在每个装饰器后插入换行可能很重要。
装饰器可用以下格式设置：
不换行
选择此选项时，重新格式化带有装饰器的行时不会应用换行。
超出右边距时换行
选择此选项时，若行超出右边距则换行。
右边距在 Settings | Editor | Code Style | JavaScript | Wrapping and Braces 上的 强制换行列 字段中定义。 如果该行超出指定数值，则会换行。
过长时分行
选择此选项时，当超出右边距时，装饰器将按每行一个的方式进行格式化。
始终换行
选择此选项时，所有装饰器都将按每行一个的方式进行格式化。
在浏览器中运行 JavaScript
在编辑器中，打开包含 JavaScript 引用的 HTML 文件。 该 HTML 文件不一定是实现应用程序起始页的文件。
请执行下列任一操作：
在主菜单中选择 ，或按 Alt+F2。 然后在列表中选择所需的浏览器。
将鼠标悬停在代码上以显示浏览器图标栏：
。 点击表示所需浏览器的图标。
调试 JavaScript
PyCharm 为您的客户端 JavaScript 代码提供内置调试器，可在 Chrome 或 Chrome 系列的其他浏览器中使用。 借助 PyCharm，您可以调试运行在内置服务器、外部服务器或远程服务器上的 JavaScript 应用程序。 有关更多信息，请参阅 在 Chrome 中调试 JavaScript。