TypeScript 代码格式化程序
指导
TypeScript 代码格式化程序
TypeScript 项目的成败取决于一致的格式。无论您的团队是使用分号还是省略它们，偏爱单引号还是双引号，两空格还是四空格缩进 — 格式化工具都需要将这些规则一致地应用于每个文件。此工具在客户端使用可配置的样式选项格式化您的 TypeScript 代码，以便您可以匹配项目的约定而无需安装任何东西。
粘贴您的 .ts 或 .tsx 代码，选择您的样式偏好，然后获得即时格式化的输出。一切都在您的浏览器中运行 — 没有代码被上传或存储。
如何使用
将您的 TypeScript 代码粘贴到输入区域或尝试内置示例。配置您首选的样式：缩进类型和宽度、分号、引号样式、尾随逗号和打印宽度。格式化后的输出将显示您选择的约定。您可以复制结果或将其下载为 .ts 文件。
特征
- 可配置缩进 – 选择 2 个空格、4 个空格或制表符以匹配您的项目样式
- 分号控制 – 根据团队的偏好添加或删除分号
- 引文风格 – 将所有字符串文字统一为单引号或双引号
- 尾随逗号选项 – 无、兼容 ES5 或所有尾随逗号
- 打印宽度 – 将行宽度设置为 80、100 或 120 个字符
- 导入排序 – 自动按字母顺序排序和组织导入语句
- 类型注解格式化 – 在冒号、泛型和类型参数周围保持一致的间距
- 语法验证 – 检测常见错误并报告行号
- 上下文感知解析 – 在格式化时尊重字符串、注释和模板字面量
- 仅客户端 – 您的代码永远不会离开您的浏览器
何时使用此工具
当您需要快速重新格式化 TypeScript 代码片段以粘贴到文档中、清理教程或 Stack Overflow 中的代码、在代码审查前规范化格式或将一致的样式应用于未按照您的项目约定编写的代码时，请使用它。它也非常方便在样式偏好之间进行转换 — 从分号切换到无分号，或从单引号切换到双引号。
常问问题
-
TypeScript 和 JavaScript 格式化之间有什么区别？
TypeScript 通过类型注解、接口、泛型、枚举和其他类型系统功能扩展了 JavaScript。TypeScript 格式化工具需要处理所有标准的 JavaScript 格式化以及特定于类型的语法，如类型注解中的冒号 (const x: string)、泛型中的尖括号 (Array)、接口和类型别名声明以及枚举格式化。标准的 JavaScript 格式化工具可能会破坏或忽略这些 TypeScript 特有的结构。
-
TypeScript 项目应该使用分号还是不使用？
这两种方法都是有效的，并且被广泛使用。TypeScript（如 JavaScript）具有自动分号插入 (ASI)，它会在解析时添加分号，因此在大多数情况下省略它们是可行的。跳过分号的团队认为代码更简洁，击键次数更少。包含分号的团队认为它更明确，并避免了罕见的 ASI 边缘情况。关键在于一致性 — 选择一种样式并在整个项目中强制执行。大多数主要的样式指南（Airbnb、Google）都包含分号，而 StandardJS 则省略它们。
-
为什么导入顺序在 TypeScript 中很重要？
一致的导入顺序可提高代码可读性并减少合并冲突。当导入按字母顺序排序并进行逻辑分组（首先是第三方包，然后是内部模块）时，开发人员可以快速找到特定的导入并避免重复。无序导入还会导致不必要的 git diff — 两个开发人员在不同位置添加导入会导致合并冲突，即使实际的代码更改是相同的。
-
什么是尾随逗号，为什么要在 TypeScript 中使用它们？
尾随逗号是放置在数组、对象、函数参数和类型参数中最后一个元素之后的逗号。使用尾随逗号可以生成更清晰的 git diff，因为添加新项目只会更改一行而不是两行（新行加上在先前最后一行添加逗号）。它们也使重新排序项目更加容易。ES5 允许在数组和对象中使用尾随逗号；ES2017 和 TypeScript 允许在函数参数中使用它们。
-
TypeScript 项目应使用什么打印宽度？
最常见的选择是 80、100 和 120 个字符。80 个字符是传统的标准，起源于终端宽度限制，并且仍然是 Prettier 的默认设置。100 个字符是一个流行的现代折衷方案，可以适应 TypeScript 冗长的类型注解而不过度换行。120 个字符在宽显示器上效果很好，但在较小的屏幕或并排 diff 视图中会降低可读性。根据您的团队典型的屏幕设置和代码审查工作流程进行选择。
