JavaScript和TypeScript工具

在使用JavaScript或TypeScript来编写您的部分或所有应用程序逻辑时,您可以依靠ReSharper。 它的功能位于.js.ts.d.ts.json文件中,HTML文件的嵌入式JavaScript代码中,以及JSX语法中。

JavaScript中的代码检查和快速修复

代码分析

ReSharper 的代码分析功能可以使用大约 100 个针对 JavaScript 和 TypeScript 代码的代码检查以及大约 50 个 TypeScript 特定的检查,帮助您快速定位和纠正错误与问题。 检测到的几乎所有问题都可以使用快速修复立即修复。

在本示例中,原本想要输入 = where ==,但这会导致一个很细微的错误…在 ReSharper 中则不会。

在分析您的代码时,ReSharper会考虑语言水平,而您可以配置此设置。 默认情况下,会根据项目设置选择语言水平,但您可以根据需要重写设置。

利用ReSharper从JavaScript符号导航

导航和搜索

ReSharper 的大多数导航和搜索功能都支持 JavaScript 和 TypeScript。 与往常一样,使用 Navigate To 快捷键 Alt+` 可以获取从特定符号导航的所有命令。

您喜欢的所有搜索命令,例如 Ctrl+TGo to Everything/Go to Type)和 Ctrl+Shift+TGo to File)也都可以使用。 支持的所有导航和搜索功能都会考虑JavaScript和TypeScript语法的特性。 例如,File Structure 可以显示参数的数据类型(如果已在 XML 文档中指定)。

Structural Search 和 Structural Replace 还可以识别 JavaScript/TypeScript 语法。

ReSharper在TypeScript中的代码补全

代码补全

代码补全功能可以帮助您更快速地编写 JavaScript/TypeScript 代码。 在您输入时,ReSharper会分析周围上下文和您最近输入的符号,以便在补全列表中建议合适的值。 例如,ReSharper可以帮助您查找内置的JavaScript方法和属性,以及当前项目中引用的JavaScript库中的符号。

ReSharper在TypeScript中的上下文操作

上下文操作和其他帮助程序

借助 ReSharper,您可以使用 50 个针对 JavaScript 和 TypeScript 代码的上下文操作以及大约 20 个 TypeScript 特定的操作,快速转换少量的 JavaScript/TypeScript 代码。

ReSharper 的其他编码辅助功能(语法高亮显示重新排列代码扩大/缩小选择,等等)也可以在 JavaScript 和 TypeScript 代码中使用。

JSDoc中的ReSharper功能

JSDoc支持

通过高亮显示注释的语法,ReSharper让JSDoc注释更易读。 在您输入JSDoc注释时,ReSharper可以帮助您完成输入。 例如,您可以在函数上方输入/**,ReSharper将为所有参数和返回值生成文档存根。 JSDoc类型、typedef和回调也会正确高亮显示,并在代码补全中可用。

此外,符号的所有 JSDoc 注释也可以从快速文档弹出窗口中这些符号的用法上查看。

ReSharper针对JavaScript和TypeScript的正则表达式辅助

正则表达式辅助

ReSharper 的正则表达式支持包括完全理解 JavaScript/TypeScript 正则表达式。 默认情况下,可以在正则表达式字面量、RegExp构造函数与方法以及String对象方法(match()search()replace()split())中识别正则表达式。 不过,您可以随时指示ReSharper以正则表达式形式分析任何字符串字面量。

JavaScript/TypeScript中的ReSharper重构 - Move to Resource

重构

在 JavaScript 和 TypeScript 代码中,您可以像在 C# 中一样使用以下重构:Inline VariableIntroduce VariableIntroduce Variable for SubstringRename

在 TypeScript 中,可以使用的一组类型重构包括:Copy TypeIntroduce FieldMove Type to Another File or NamespaceMove to Folder

还有一种特定于JavaScript/TypeScript的重构:Move to Resource。 此重构可以在从 Visual Studio 模板(例如 Apache Cordova)创建的 JavaScript/TypeScript 项目中运行,并且允许将字符串字面量移动到资源文件中。

所有JavaScript/TypeScript重构也都可以用于JSX语法中。

在JavaScript/TypeScript中根据用法生成代码

根据用法创建

借助 ReSharper,您可以使用非现有符号,然后在几乎所有支持的语言中根据这些用法生成恰当的实现。 JavaScript和TypeScript也不例外 - 对于任何未解析的符号,ReSharper都会建议一种或多种创建方式。

在TypeScript中生成构造函数

生成构造函数

在TypeScript类型声明上按Alt+Insert时,ReSharper让您可以快速地为此类型创建构造函数。 构造函数生成向导可以创建将类型和基类型中的选定字段用作参数的非默认构造函数。

重写TypeScript类型成员

实现/重写成员

对于继承的类型,有两种相关的代码生成功能:

  • 实现缺失成员可以实现当前类中缺失的任何接口成员或抽象成员。
  • 重写成员也可以执行相同的操作,但在适用时,还可以重写虚拟成员。
适用于TypeScript的实时模板

代码模板

ReSharper 提供了几十种实时模板,这些模板可以覆盖 JavaScript 和 TypeScript 中所有常用的代码结构。 还有适用于 TypeScript 和 JavaScript 的后缀模板,以及适用于 TypeScript 类、接口和模块的文件模板。 您可以使用自定义模板扩展默认的模板组。

在JavaScript中配置格式化规则

代码样式辅助

ReSharper 可以帮助您自动维护 JavaScript 和 TypeScript 代码中代码样式的两个基础:代码格式化规则命名约定

事实上,代码格式化的效果甚至比在C#中更好:在选定代码块上按Alt+Enter并选择Format selection | Configure可以查看和配置影响选定代码块的所有格式化规则。

提供特定于JavaScript和TypeScript的代码样式偏好设置:您可以一致地使用单引号(')或双引号(")来处理字符串字面量,并为语句自动添加或移除可选的分号。

在TypeScript中,您还可以控制如何在声明中指定类型(显式类型名称、varany),是否显式使用public修饰符,以及如何导入模块。

所有 JavaScript 和 TypeScript 代码样式偏好设置都可以使用单个命令(快速修复或代码清理)在任何范围中应用。

JavaScript中的单元测试功能

单元测试辅助

ReSharper 可以基于 QUnitJasmine 直接在 Visual Studio 中发现和运行单元测试。 您可以选择使用哪款浏览器来执行 JavaScript/TypeScript 测试,或者使用 PhantomJS 实现无头测试。

与 .NET 单元测试类似,您也可以使用 Unit Test Explorer 在您的解决方案中浏览 JavaScript/TypeScript 测试,从此窗口、Solution Explorer 或编辑器中运行测试,以及使用多个单元测试会话

ReSharper中的JSLint、ESLint和TSLint支持

JSLint、ESLint和TSLint

ReSharper扩展了内置的代码分析规则,提供对以下三种静态分析工具的支持:JSLintESLintTSLint。 所有这些linter都有助于确保JavaScript和TypeScript代码可读且可维护。 它们还允许添加自定义规则,您可以将这些规则包含在ReSharper代码分析中。

如果您的计算机上已配置Node.js解释器,您可以在Tools | Web Linters下的ReSharper设置中启用linter。

JSON值帮助程序

JSON值帮助程序和架构目录

借助JSON值帮助程序,您可以指示ReSharper为您的JSON文件提供代码补全或验证。 您可以在JSON Value Helpers选项页面中基于文件名掩码和/或架构匹配添加帮助程序。 也可以在JSON选项中添加自定义JSON架构目录

快捷键注释

本页面提供的所有键盘快捷键都在 ReSharper 的默认“Visual Studio”按键映射中。 有关 ReSharper 两种按键映射的详细信息,请参阅 ReSharper 文档