TypeScript 格式化工具
JavaScript 格式化工具 的预设方案
格式化 TypeScript,完整支持类型注解、泛型、装饰器和接口。使用 TypeScript 专用解析器,而不是 JavaScript 解析器,所以类型语法能被正确理解,而不是被当成错误。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何JavaScript 格式化工具
- 1
粘贴你的代码
JavaScript、TypeScript 或 JSX。
- 2
设置你的风格
缩进、分号和引号偏好。
- 3
复制结果
格式化结果和 Prettier 在你的编辑器里产出的完全一致。
为什么 TypeScript 需要专用解析器,而不是复用 JavaScript 的
TypeScript 是 JavaScript 的超集,但它新增的类型层语法——接口、用 `extends` 约束的泛型、装饰器、`as` 类型断言,以及独立的纯类型声明——在纯 JavaScript 语法里没有任何意义,会导致一个只支持 JavaScript 的解析器在完全合法的 TypeScript 代码上直接报错失败。使用专门的 TypeScript 解析器,而不是试图强迫 JavaScript 解析器去接受自己语法的一个超集,正是能让一个满是泛型和接口的文件被正确格式化、而不是一遇到 JavaScript 本身没有的特性就被当成语法错误拒绝的原因。
TypeScript 里的 JSX,一个特殊情况
一个把 JSX 语法和 TypeScript 类型注解混在一起的 `.tsx` 文件,在一个特定的地方确实存在真正的解析歧义:像 `<Foo>value` 这样的尖括号类型断言,对一个不知道自己在读哪种方言的解析器来说,看起来和一个 JSX 元素标签的开头一模一样。选择 TypeScript 加 JSX 的解析模式能正确解决这个歧义,这也是为什么提前选对方言——而不是假设一个通用的 JavaScript 解析器能自己搞明白——对于混合了这两者的组件文件来说尤其重要。
装饰器仍然是这门语法里还在演进的部分
装饰器——在 Angular 以及一些基于 TypeScript 的后端框架里常见的 `@Component` 风格标注——在这门语言的标准化进程中经历过好几个不同的提案阶段,不同的代码库根据它们编写的时间和使用的编译器选项,可能针对的是这套语法略微不同的版本。正确解析装饰器语法专门需要 TypeScript 感知的解析器;一个纯 JavaScript 解析器遇到类或方法前面的一个 `@` 符号,没有任何可以回退的既定含义,只会直接拒绝这个文件。
常见问题
这和在本地运行 Prettier 是一样的吗?
是的——它就是 Prettier 本身,只是运行在你的浏览器里,而不是运行在 Node 里。用同样的选项,你会得到和 `npx prettier` 处理同一个文件完全一致的输出结果。
为什么不用一个更简单的格式化工具?
因为简单的格式化工具会破坏真实代码。模板字面量和正则表达式内部的大括号、JSX,以及自动分号插入,都需要真正解析这门语言才能正确处理。一个每五十个文件里就悄悄搞坏一个的格式化工具,比没有格式化工具还糟糕。
支持 TypeScript 和 JSX 吗?
支持。类型注解、泛型、装饰器和 JSX 都能被解析。注意它只做格式化——不做类型检查,也不做编译。
为什么格式化失败了?
代码里有语法错误——Prettier 必须先能解析,才能重新输出。错误信息会包含第一个问题所在的行号和列号,通常足够帮你定位。
我的代码会被发送到服务器吗?
不会。Prettier 会被下载到你的浏览器里并在本地运行。私有代码永远不会离开你的机器,而这一点在大多数在线格式化工具上并不成立。