语言和框架:JavaScript
借助 JetBrains Rider,您可以使用 JavaScript 和 Node.js 开发现代的 web、移动和桌面应用程序。
JetBrains Rider 还支持 React、 Angular、 Vue.js 等框架,并与各种用于网页开发的工具紧密集成。
JavaScript 感知的编码辅助包括关键字、标签、变量、参数和函数的 代码补全, 错误和语法高亮 、格式化、 代码检查和 快速修复 ,以及 常见和 JavaScript 特定的重构。 JetBrains Rider 还集成了 JavaScript linters 和 Flow type checker。
借助内置调试器,您可以调试客户端和服务器端代码,甚至可以在 交互调试控制台中运行 JavaScript 代码段。
JetBrains Rider 与 Jest、 Karma、 Protractor、 Cucumber 和 Mocha 测试框架集成。 JetBrains Rider 支持运行和调试测试,并支持在测试和受测对象之间或失败的测试与导致问题的代码片段之间进行导航。
要打开一个以目录结构组织且没有解决方案文件的应用程序,请按 Ctrl+Shift+O 或从主菜单中选择 ,选择应用程序的根文件夹,然后单击 选择文件夹。
开始之前
请确保在设置中启用 JavaScript 和 TypeScript 插件。 按 Ctrl+Alt+S 打开设置,然后选择 。 点击 已安装 选项卡。 在搜索字段中,键入 JavaScript and TypeScript。 有关插件的更多信息,请参阅 插件管理。
选择 JavaScript 语言版本
要获得可靠高效的编码支持,您需要指定将在项目的所有 JavaScript 文件中默认使用的语言版本。
在 设置/首选项 对话框(Ctrl+Alt+S )中,前往 。 JavaScript 页面打开。
从列表中选择支持的 JavaScript 语言版本之一:
ECMAScript 6+ :此版本增加了对 ECMAScript 2015-2020 引入的功能的支持,以及对 JSX 语法和一些当前标准提案的支持。
Flow :此版本增加了对 Flow 语法的支持。
使用多个 JavaScript 版本
如果您正在开发一个同时使用 ECMAScript 5.1 和更新版本 ECMAScript 的应用程序,最简单的方法是从 JavaScript 页面 ( )的列表中为整个项目选择最高的语言版本。
在 JavaScript 页面 ,点击
旁边的 JavaScript 语言版本 列表。 JavaScript 语言版本 对话框打开。
点击
,在打开的对话框中选择 您 需要自定义语言版本的文件夹。 JetBrains Rider 将您带回显示所选文件夹的 JavaScript 语言版本 对话框,在 路径 字段中显示。
从 语言 列表中选择所选文件夹中的文件的语言版本。 在项目中的所有其他 JavaScript 文件中,JetBrains Rider 将使用在 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 文件
Right-click the package.json file in the editor or in the 资源管理器 tool window Alt+1 and choose 运行'npm install' from the context menu.
或者, 在
npm install中运行 终端 Alt+F12。
配置项目依赖的代码补全
为了为项目依赖项提供代码补全功能,JetBrains Rider 会自动创建一个 node_modules库。 在语言和集成开发环境(IDE)的上下文中, library 是一个文件或一组文件。 除了 JetBrains Rider 从您编辑的项目代码中获取的函数和方法外,这些文件的函数和方法也会添加到 JetBrains Rider 的内部知识中。
查看内嵌提示
内嵌提示出现在编辑器中,为您的代码提供额外信息,使其更易于阅读和导航。
参数提示
参数提示 显示方法和函数中的参数名称,以使您的代码更易读。 默认情况下,参数提示仅针对文字值或函数表达式显示,不针对命名对象显示。

配置参数提示
打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 。
展开 JavaScript 下的 参数名称。
通过选择相应的复选框指定您希望显示参数提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。
对于某些方法和函数,JetBrains Rider 在任何情况下都不会显示参数提示。 请点击 排除列表... 查看这些方法和函数,可能启用参数提示,或者向列表中添加新项目。
要隐藏任意上下文中任意值类型的参数提示,请取消选中 JavaScript 复选框下的 参数名称。
返回类型提示
JetBrains Rider 能在函数调用和调用链中显示函数返回类型。
函数返回类型提示 是从 JSDoc 注释 或基于代码的静态分析推断出来的。
方法链接中的返回类型提示 将在方法调用分割为多行并返回至少 2 种不同类型时显示。
方法链中的返回类型提示由内部 JetBrains Rider 评估器提供。
配置方法返回类型提示
打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 。
在 类型 下,展开 JavaScript 节点,然后选中 函数返回值类型 复选框。
若要在方法链中显示返回类型提示,请展开 方法链 节点并选中 JavaScript 复选框。
预览显示了您在设置中所做的更改如何影响代码外观。
类型提示
类型提示 显示变量、字段或参数的类型。 变量和字段的类型显示在其定义旁边。 参数的类型提示显示在函数调用中。 类型提示是从 JSDoc comments 或您的代码的静态分析中推断出的。

配置类型注解
打开 设置/首选项 对话框(Ctrl+Alt+S ),然后转到 。
在类别树中展现 。
展开 类型注解 节点,并指定您希望显示类型提示的上下文。
预览显示了您在设置中所做的更改如何影响代码外观。

若要隐藏在任何上下文中任何值类型的参数类型提示和返回类型提示,请取消选中 JavaScript 复选框 类型。
JavaScript 中的自动导入
JetBrains Rider 可以生成模块、类、组件以及任何其他导出的符号的导入语句。 JetBrains Rider 能在您完成 ES6 符号或 CommonJS 模块时动态添加缺失的 import 语句。 JetBrains Rider 要么自行决定导入语句的风格,要么显示一个弹出窗口,供您选择所需的风格。
添加 ES6 import 语句
如果您从项目中导入符号到一个 ES6 模块文件或已经包含 ES 导入语句的文件中,JetBrains Rider 会在符号补全时自动插入 ES6 导入。
对于较早版本的 JavaScript 或禁用完成时自动导入的情况,JetBrains Rider 会将符号标记为未解析,并显示带有建议快速修复的工具提示:

或者,按 Alt+Enter:

如果有多个可能的导入来源,JetBrains Rider 将显示建议列表:

JetBrains Rider 还可以为项目依赖项中定义的符号生成 import 语句。 自动导入功能适用于包含 TypeScript 定义文件的软件包中的符号(如 moment或 redux )或作为 ES 模块编写的源代码。
如果当前文件已经包含一个 ES6 import 语句,JetBrains Rider 插入一个新的也是 ES6 风格的。

添加 CommonJS(require)导入语句
如果您在将符号从项目导入到已经是 CommonJS 模块(具有 require 语句或 module.export )的文件中,JetBrains Rider会在符号完成时自动插入一个 CommonJS 导入。

或者,将文本光标放置在要导入的符号处,按 Alt+Enter ,并选择一种使用 CommonJS(require )导入样式的快速修复。

添加 import defer 语句
JetBrains Rider 在 JavaScript 环境中支持 import defer 语法,并提供代码补全、错误高亮、 import 语句的实时模板以及用法搜索功能。
也支持 import.defer 语法:
添加 import source 语句
JetBrains Rider 在 JavaScript 环境中支持 import source 语法,并提供代码补全、错误高亮、 import 语句的实时模板以及用法搜索功能。
也支持 import.source 语法:
配置自动导入
要在代码完成时自动添加 ES6 导入语句,请打开 设置/首选项 对话框(Ctrl+Alt+S ),转到 ,并在 TypeScript / JavaScript 区域中选择 自动添加JavaScript import 复选框。
要配置
import语句的外观,请打开 设置/首选项 对话框(Ctrl+Alt+S ),转到 ,并使用 导入 选项卡中的控件。 有关详细信息,请参阅 Imports 选项卡。
配置语法高亮
您可以根据您的偏好和习惯配置 JavaScript 语法高亮显示。
在 设置/首选项 对话框(Ctrl+Alt+S )中,前往 。
选择颜色方案,接受从默认设置继承的高亮设置,或按照 配色方案:IDE 文本的字体和颜色 中的描述自定义它们。
重新设置代码格式
JetBrains Rider 允许您根据当前的 代码样式方案重新格式化 JavaScript 代码。
您还可以在 .editorconfig 中指定格式设置,或使用 Prettier。
装饰器
对于装饰器,在重新格式化期间抑制在每个装饰器后插入换行可能很重要。
以下是装饰器的可用格式设置选项:
请勿换行
选择此选项时,重新格式化装饰器行时不应用换行。
如果长则换行
选择此选项时,如果行超出右边距,则会换行。
右边距在 在以下位置硬包装 字段中定义,位于 设置 | 编辑器 | 代码样式 | JavaScript | 换行和大括号 中。 如果行超出指定的数字,则会换行。
如果太长就砍掉
选择此选项时,如果装饰器超出右边距,将每行格式化一个装饰器。
始终换行
选择此选项时,所有装饰器将每行格式化一个。
在浏览器中运行 JavaScript
在编辑器中,打开带有 JavaScript 引用的 HTML 文件。 此 HTML 文件不一定是实现应用程序起始页的文件。
请执行以下操作之一:
从主菜单中选择 或按 Alt+F2。 然后从列表中选择所需的浏览器。
将鼠标悬停在代码上以显示浏览器图标栏:
。 点击指示所需浏览器的图标。
调试 JavaScript
JetBrains Rider 提供了一个内置调试器,用于调试您的客户端 JavaScript 代码,兼容 Chrome或其他 Chrome系列浏览器。 使用 JetBrains Rider,您可以调试在内置服务器、外部服务器或远程服务器上运行的 JavaScript 应用程序。 如需了解更多信息,请参阅 在 Chrome 中调试 JavaScript。