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