JavaScript 的编码辅助

语法高亮

ReSharper 扩展了 Visual Studio 默认的符号高亮功能。 此外，它还使用可配置的颜色高亮显示字段、本地变量、类型和其他标识符。 例如，ReSharper 的语法高亮功能可以让您轻松区分代码中的本地变量和字段。

JavaScript 的默认语法高亮如下所示：

如果需要，您可以为每种标识符 配置颜色和字体。

代码补全

代码补全功能帮助您更快地编写代码。 在您输入时，ReSharper 会分析周围的上下文和您最近输入的符号，以便在补全列表中建议合适的值。

例如，ReSharper 可以帮助您找到内置的 JavaScript 方法和属性，以及当前项目中引用的 JavaScript 库中的符号：

上下文操作

ReSharper 提供了一组针对 JavaScript 代码的 上下文操作。 您可以在 ReSharper 选项 的 代码编辑 | JavaScript | 上下文操作 页面中找到这些操作的完整列表。 如果需要，您还可以通过此页面禁用某些操作。

一旦某个上下文操作在当前光标位置可用，ReSharper 会在光标左侧显示相应的 操作指示器 。 然而，有时 ReSharper 会为当前光标位置提供多个上下文相关的功能。 在这种情况下，会显示与优先级最高的操作对应的操作指示器，其他所有操作仅在您通过单击操作指示器或按下 Alt+Enter 展开 操作列表 时才会出现。上下文操作的优先级最低，因此它们通常出现在操作列表的底部。

以下是一些 JavaScript 上下文操作的示例：

反转赋值

如果您想快速交换赋值的左侧和右侧部分，请使用此上下文操作：

在此示例中， evt 被赋值给 window.event：

移除大括号

如果大括号是多余的，例如一个块只包含一条语句，此上下文操作可以移除开头和结尾的大括号并修正缩进。

结果是，开头和结尾的大括号都被移除。

从用法创建

如果 ReSharper 检测到未声明的变量，请使用此上下文操作添加缺失的声明。

结果是，添加了一个变量声明

并且您可以为变量填写初始值

拆分声明和赋值

如果您需要拆分变量声明和赋值，可以使用上下文操作。

在此示例中， formObj 的声明成为一个单独的语句，随后可以 重构：

拆分为单独的声明

此外，您可能希望将多声明语句拆分为几个单独的声明。 为此，请使用此上下文操作：

结果是，每个声明都是一个单独的语句。

代码重排

要重排代码，请按 Ctrl+Shift+Alt ，选择您想要移动的代码元素或选区。 如果移动这些元素是合理的，ReSharper 会向您显示一个工具提示，其中包含可能的移动选项。

如果您在没有选定内容的情况下调用此命令，ReSharper 会自动选择可移动的元素。 有时会进行两个选择。 在这种情况下，一个选择用蓝色高亮显示，另一个用黄色高亮显示。 例如，如果您在函数参数上调用此命令，ReSharper 会进行两个选择：参数本身，您可以相对于其他参数向左或向右移动，以及整个函数，您可以相对于其他类型成员向上或向下移动：

ReSharper 允许您以以下方式移动元素：

• 函数

  • 在当前文件或另一个函数中上下移动

  • 函数声明中的参数和函数用法中的参数左右移动

• 对象字面量

  • 对象字面量在文件中或包含声明中上下移动

  • 对象属性左右移动。 请注意，即使对象属性定义在多行中，左右箭头也会重新排列它们。

• 语句

  • 赋值语句的部分左右移动

  • 函数或复合语句中的语句上下移动

  • 语句从复合语句中移出（左）或移入紧接的复合语句中（右）

  • switch 语句中的分支上下移动

  • 复合语句的结束大括号上下移动（贪婪大括号）。 要移动结束大括号，请将插入点放在大括号外，按 Ctrl+Shift+Alt ，然后使用上下箭头将当前复合语句后续的语句包含在内或将最后一条语句移出。

• 表达式

  • 表达式中的操作数左右移动

  • 集合和数组初始化中的元素左右移动

• 其他元素

  • 模板字符串中的参数左右移动

  • 行注释和 C 风格注释上下移动

正则表达式辅助

ReSharper 高亮显示正则表达式中的语法结构、错误和冗余：

高亮颜色具有以下含义：

• 浅蓝色 – 字符类、锚点和量词

• 浅绿色 – 分组结构

• 橙色 – 集合结构

• 粉色和浅粉色 – 转义序列

• 红色带波浪下划线 – 错误

当您将插入点放在分隔符之一时，组、组名和集合中的匹配括号会被高亮显示。 您可以使用 ReSharper 选项的 高亮匹配的分隔符 设置在 环境 | 编辑器 | 外观 页面上切换和调整此高亮显示。

默认情况下，ReSharper 会高亮显示所有字符串中的正确和错误的转义序列：

以及模板字符串：

If necessary, you can turn this highlighting off by clearing the 高亮显示字符串字面量中的特殊字符 checkbox on the 代码检查 | 设置 page of ReSharper options.

ReSharper 还为几乎所有 JavaScript 正则表达式结构提供 IntelliSense 支持。 在补全列表中，每个结构都会显示简要描述。

您可以调用 基本补全 Control+Space 来显示当前作用域中可用的元素。

JSDoc 的编码辅助

ReSharper 能理解您代码中的 JSDoc 注释，并帮助您处理它们。 首先，ReSharper 通过高亮显示 JSDoc 注释的语法，大大提高了其可读性。

当您输入 JSDoc 注释时，ReSharper 会通过补全您的输入来帮助您。 例如，您可以在函数上方输入 /** ，ReSharper 会为所有参数和返回值生成文档存根，并将插入点放在注释中，以便您开始输入函数描述。 您还可以在没有前导 @ 的情况下开始输入 JSDoc 关键字：

当您将 重命名重构 应用于函数参数时，ReSharper 还会重命名 JSDoc 中的相应项。

如果函数有 JSDoc 注释，它们会显示在 参数信息 工具提示和 快速文档 弹出窗口中。

JSDoc 类型、typedef 和回调会被正确高亮显示，并在代码补全中可用：

快速文档

使用 ReSharper，您可以直接在编辑器中快速查看 JavaScript 符号的文档。 JSDoc 注释会显示在 快速文档工具提示 中。 所有标签都会以章节的形式呈现：

要查看符号的文档，请将插入点放在符号上，然后按 Control+Q 或在主菜单中选择 ReSharper | 编辑 | 显示快速文档。