JavaScript
借助 PyCharm，您可以使用 JavaScript 和 Node.js 开发现代的 web、移动和桌面应用程序。
PyCharm 还支持 React、 Angular、 Vue.js 等框架，并与各种用于网页开发的工具紧密集成。
JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 代码补全， 错误和语法高亮 、格式化、 代码检查和 快速修复 ，以及 常见和 JavaScript 特定的重构。 PyCharm 还集成了 JavaScript linters 和 Flow type checker。
借助内置调试器，您可以调试客户端和服务器端代码，甚至可以在 交互调试控制台中运行 JavaScript 代码段。 请注意，PyCharm 仅支持在 Chrome 或 Chrome 系列的其他浏览器中调试 JavaScript。 了解更多 在 Chrome 中调试 JavaScript。
PyCharm 与 Jest、 Karma、 Protractor、 Cucumber 和 Mocha 测试框架集成。 PyCharm 支持运行和调试测试，并支持在测试和受测对象之间或失败的测试与导致问题的代码片段之间进行导航。
在此页面上，您将找到一个简短的入门指南，它将一步步引导您从创建 Web 应用程序到调试和测试。
在开始之前
请确保在设置中启用了 JavaScript 与 TypeScript 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，键入 JavaScript and TypeScript。 有关插件的更多信息，请参阅 插件管理。
创建一个新应用程序
PyCharm 可以创建一个基本的 JavaScript 项目，您可以通过最少的配置来设置项目。 生成的项目包括一个 package.json 和一个 index.js 文件，内含 console.log() 欢迎信息，您还可以另外生成一个示例 Web 应用程序。
默认情况下，PyCharm会自动创建一个 Git 仓库，并 将生成的源文件置于 Git 控制之下。
点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 。 打开 新建 项目 对话框。
在左侧窗格中，选择任何面向 JavaScript 应用程序开发的项目类型，例如 Angular CLI、AngularJS、React App 或 React Native。
在右侧窗格中，指定存储项目相关文件的文件夹路径。
展开 更多设置 并指定其他所需的项目选项。
从现有的 JavaScript 应用程序开始
如果您打算继续开发一个现有的 JavaScript 应用程序，请在 PyCharm 中打开它， 选择要使用的 JavaScript 版本 ，并配置其中的库。 可选地 下载所需的 npm 依赖项。
打开您机器上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制中检出应用程序源代码
在 欢迎 屏幕上点击 克隆存储库克隆。
或者，从主菜单中选择 或 或 。
您可能会看到与您的项目相关联的其他版本控制系统，而不是在主菜单中的 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。
项目安全
当您打开一个在 PyCharm 之外创建并导入到 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 and Yarn。
在空项目中安装包
在嵌入的 终端 (Alt+F12 )中，输入：
npm install <package name>。
如果您的项目中已经有一个 package.json 文件
在编辑器中或在 项目 工具窗口 Alt+1 中右键单击 package.json 文件，然后从上下文菜单中选择 运行'npm install'。
或者， 在
npm install中运行 终端 Alt+F12。
配置项目依赖的代码补全
为了为项目依赖项提供代码补全功能，PyCharm 会自动创建一个 node_modules库。 在语言和集成开发环境（IDE）的上下文中， library 是一个文件或一组文件。 除了 PyCharm 从您编辑的项目代码中获取的函数和方法外，这些文件的函数和方法也会添加到 PyCharm 的内部知识中。 有关更多信息，请参阅 配置 JavaScript 库 和 代码补全。
查看内嵌提示
内嵌提示出现在编辑器中，为您的代码提供额外信息，使其更易于阅读和导航。
参数提示
参数提示 显示方法和函数中的参数名称，以使您的代码更易读。 默认情况下，参数提示仅针对文字值或函数表达式显示，不针对命名对象显示。
配置参数提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
展开 JavaScript 下的 参数名称。
通过选择相应的复选框指定您希望显示参数提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。
对于某些方法和函数，PyCharm 在任何情况下都不会显示参数提示。 请点击 排除列表... 查看这些方法和函数，可能启用参数提示，或者向列表中添加新项目。
要隐藏任意上下文中任意值类型的参数提示，请取消选中 JavaScript 复选框下的 参数名称。
返回类型提示
PyCharm 能在函数调用和调用链中显示函数返回类型。
函数返回类型提示 是从 JSDoc 注释 或基于代码的静态分析推断出来的。
方法链接中的返回类型提示 将在方法调用分割为多行并返回至少 2 种不同类型时显示。
方法链中的返回类型提示由内部 PyCharm 评估器提供。
配置方法返回类型提示
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 类型 下，展开 JavaScript 节点，然后选中 函数返回类型 复选框。
若要在方法链中显示返回类型提示，请展开 方法链 节点并选中 JavaScript 复选框。
预览显示了您在设置中所做的更改如何影响代码外观。
类型提示
类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 参数的类型提示显示在函数调用中。 类型提示是从 JSDoc comments 或您的代码的静态分析中推断出的。
配置类型注解
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在类别树中展现 。
展开 类型注解 节点，并指定您希望显示类型提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。
若要隐藏在任何上下文中任何值类型的参数类型提示和返回类型提示，请取消选中 JavaScript 复选框 类型。
JavaScript 中的自动导入
PyCharm 可以生成模块、类、组件以及任何其他导出的符号的导入语句。 PyCharm 能在您完成 ES6 符号或 CommonJS 模块时动态添加缺失的 import 语句。 PyCharm 要么自行决定导入语句的风格，要么显示一个弹出窗口，供您选择所需的风格。
添加 ES6 import 语句
如果您从项目中导入符号到一个 ES6 模块文件或已经包含 ES 导入语句的文件中，PyCharm 会在符号补全时自动插入 ES6 导入。
对于较早版本的 JavaScript 或禁用完成时自动导入的情况，PyCharm 会将符号标记为未解析，并显示带有建议快速修复的工具提示：
或者，按 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 ），转到 ，并使用 导入 选项卡中的控件。 有关详细信息，请参阅 Imports 选项卡。
配置语法高亮
您可以根据您的偏好和习惯配置 JavaScript 语法高亮显示。
在 设置 对话框 (Ctrl+Alt+S) 中，前往 。
选择颜色方案，接受从默认设置继承的高亮设置，或按照 颜色和字体 中的描述自定义它们。
重新设置代码格式
PyCharm 允许您根据当前的 代码样式方案重新格式化 JavaScript 代码。
您还可以在 .editorconfig 中指定格式设置，或使用 Prettier。
装饰器
对于装饰器，在重新格式化期间抑制在每个装饰器后插入换行可能很重要。
以下是装饰器的可用格式设置选项：
请勿换行
选择此选项时，重新格式化装饰器行时不应用换行。
如果太长则进行换行
选择此选项时，如果行超出右边距，则会换行。
右边距在 在以下位置硬包装 字段中定义，位于 设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号 中。 如果行超出指定的数字，则会换行。
如果太长就砍掉
选择此选项时，如果装饰器超出右边距，将每行格式化一个装饰器。
始终换行
选择此选项时，所有装饰器将每行格式化一个。
在浏览器中运行 JavaScript
在编辑器中，打开带有 JavaScript 引用的 HTML 文件。 此 HTML 文件不一定是实现应用程序起始页的文件。
请执行以下操作之一：
从主菜单中选择 或按 Alt+F2。 然后从列表中选择所需的浏览器。
将鼠标悬停在代码上以显示浏览器图标栏：
。 点击指示所需浏览器的图标。
调试 JavaScript
PyCharm 提供了一个内置调试器，用于调试您的客户端 JavaScript 代码，兼容 Chrome或其他 Chrome系列浏览器。 使用 PyCharm，您可以调试在内置服务器、外部服务器或远程服务器上运行的 JavaScript 应用程序。 欲了解更多信息，请参阅 在 Chrome 中调试 JavaScript。