JavaScript
借助 PyCharm，您可以使用 JavaScript 和 Node.js 开发现代 Web、移动端与桌面应用程序。
PyCharm 还支持 React、 Angular、 Vue.js 等框架，并与多种 Web 开发工具深度集成。
JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 补全、 错误和语法高亮显示 、格式化、 代码检查 与 快速修复 ，以及 通用重构和 JavaScript 特定的重构。 PyCharm 还可与 JavaScript linter 和 Flow 类型检查器 集成。
借助内置调试器，您可以调试客户端和服务端代码，甚至可在 交互式调试器控制台 中运行 JavaScript 代码片段。 请注意，PyCharm 仅支持在 Chrome 或 Chrome 系列的其他浏览器中调试 JavaScript。 了解详情请参阅 在 Chrome 中调试 JavaScript。
PyCharm 可与 Jest、 Karma、 Protractor、 Cucumber 和 Mocha 等测试框架集成。 PyCharm 支持运行和调试测试，并可在测试与被测对象之间，或在失败的测试与导致问题的代码片段之间进行导航。
在本页，您将找到一份简短的入门指南，按步骤引导您从创建 Web 应用程序到对其进行调试与测试。
开始之前
请确保在设置中启用了 JavaScript 和 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。
在空项目中安装包
在内置的 终端 （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 复选框。
JavaScript 中的自动导入
PyCharm 可以为模块、类、组件以及任何其他已导出的符号生成 import 语句。 在补全 ES6 符号或 CommonJS 模块时，PyCharm 可以即时添加缺失的 import 语句。 PyCharm 会自行决定 import 语句的样式，或显示一个弹出窗口，供您选择所需的样式。
添加 ES6 import 语句
如果您将项目中的符号导入到一个 ES6 模块文件，或该文件已包含 ES import 语句，PyCharm 会在符号补全时自动插入 ES6 import。
对于较早的 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 import 语句，请打开 设置 对话框（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。