会运行 TypeScript 类型检查器吗？

不会。工具只解析和打印 TypeScript 或 TSX，语法通过的文件仍可能有类型错误、缺失声明或无法解析的导入。

输出会变成 JavaScript 吗？

不会。类型注解仍然存在；需要可执行 JavaScript 时，应使用项目正常的编译或转译流程。

什么时候应明确选择 TSX？

源文本包含 JSX 或可能有歧义的尖括号时，明确选择 TSX，让解析器选择可被核对，而不是依赖自动判断。

Web 开发

TypeScript / TSX 格式化

使用 Prettier 在浏览器本地格式化 TypeScript 与 TSX，可明确选择语法或让工具按 JSX 特征自动判断。

在线工具价格方案

输入0 个字符

结果0 个字符

想要更顺手的原生工作流？

把「TypeScript / TSX 格式化」放到一个快捷键里。

DevSexy Mac 版保留同样私密的本地处理，同时提供全局快捷键；不用管理浏览器标签页，需要时直接呼出。

全局快捷键可离线使用本地处理

免费试用 Mac 版

当前浏览器工具仍然免费。

同一个尖括号 · 两套语法解释

先告诉 parser：这里能不能写 JSX。

在 .ts 中，尖括号可能属于类型语法；在 .tsx 中，相同 token 可能开启 JSX。自动模式只会根据常见 JSX 特征给出文件类型提示，遇到泛型或旧式尖括号断言等歧义时，应明确选择 TypeScript 或 TSX。

<T>

.ts · TypeScript

const value = <User>input

旧式尖括号类型断言在 TypeScript 中合法。

.tsx · TypeScript + JSX

const view = <UserCard />

尖括号用于 JSX；类型断言应改写为 input as User。

TypeScript / TSX 语法样本

格式化器必须先理解需要保留的语法。

SYNTAX 01

仅类型导入

import type { User } from './types'

SYNTAX 02

satisfies

const theme = raw satisfies Theme

SYNTAX 03

泛型约束

function pick<T extends Entity>(value: T)

SYNTAX 04

映射类型

type Flags<T> = { [K in keyof T]?: boolean }

SYNTAX 05

条件类型

type Id<T> = T extends Entity ? string : never

SYNTAX 06

TSX props

const Card = (props: CardProps) => <article />

格式化处理链

先完成 parse，再按同一程序结构重新打印。

源码

token、注释、类型和 JSX 以文本形式进入 Worker。

TypeScript parser

所选的 .ts / .tsx 文件语境决定如何解释歧义 token。

Prettier printer

根据缩进和 print width 重新选择换行与空格。

格式化结果

类型和注释仍是源码；没有任何代码被执行。

四条能力边界

能成功格式化，不代表能通过构建。

类型检查

这些类型在项目上下文里真的能组合吗？

Next: tsc --noEmit

Lint

代码是否符合语义规则和仓库规范？

Next: ESLint

转译

目标浏览器或运行时最终需要什么 JavaScript？

Next: tsc / bundler

执行

程序在运行时会产生什么行为？

Next: 测试 / runtime

回到仓库配置

一次性的在线整理，最终应与代码库保持一致。

浏览器

明确选择 TS 或 TSX；只有语法不含歧义时再使用自动模式。

编辑器

使用仓库版本的 Prettier 配置和 format-on-save。

提交

审阅格式化 diff，确认没有混入手工语义修改。

CI

让 prettier --check 与 lint、type-check 各自承担独立门禁。

运行可复现的实例

用对应解析模式格式化类型注解和 TSX 标记。

使用实例会替换当前输入、参考输入、操作与选项。以下均为公开演示数据。

格式化接口与带类型对象

明确选择 TypeScript，使用两空格缩进。

输入

interface User{name:string}const user:User={name:"Ada"}

接口和类型注解仍然保留在 TypeScript 源码中。

interface User {
name: string;
const user: User

格式化带类型的 JSX 组件

选择 TSX，让尖括号按 JSX 解释。

输入

const Badge=({name}:{name:string})=><span>{name}</span>

保留属性类型与 span 表达式，此过程没有运行类型检查器。

name: string
<span>{name}</span>

继续处理相关任务

JavaScript 格式化与压缩

使用 Prettier 格式化、美化 JavaScript，或用 Terser 压缩代码并查看解析诊断；源码只解析，不执行。

HTML/SVG 转 JSX/TSX

将 HTML 或 SVG 的属性和简单内联 style 改写为 React 语法，并按需输出 JSX/TSX 代码片段或组件。

JSON Schema 与 OpenAPI 工作台

按 JSON Schema 校验数据实例，定位失败规则，并查看 OpenAPI 3.1 结构与接口路径差异。

在 DevSexy Mac 应用中重复处理

反复处理本地数据时，可通过 Option 快捷键打开原生应用，离线使用工具。

直接回答

什么是 TypeScript / TSX 格式化？

在线使用 Prettier TypeScript parser 格式化 .ts 与 .tsx 代码，可选择 TS、TSX 或自动识别；代码在浏览器本地处理，格式化不等于类型检查、lint、转译或执行。

它能做什么？

格式化

如何使用 TypeScript / TSX 格式化

01
准备输入
尖括号存在歧义时，明确选择 TypeScript 或 TSX。
02
选择操作
设置缩进与换行宽度，再格式化。
03
核对结果
在项目中运行 tsc 和测试，检查类型、导入及组件行为。

常见问题

会运行 TypeScript 类型检查器吗？: 不会。工具只解析和打印 TypeScript 或 TSX，语法通过的文件仍可能有类型错误、缺失声明或无法解析的导入。
输出会变成 JavaScript 吗？: 不会。类型注解仍然存在；需要可执行 JavaScript 时，应使用项目正常的编译或转译流程。
什么时候应明确选择 TSX？: 源文本包含 JSX 或可能有歧义的尖括号时，明确选择 TSX，让解析器选择可被核对，而不是依赖自动判断。