會執行 TypeScript 型別檢查器嗎？

不會。工具只解析和列印 TypeScript 或 TSX，語法透過的檔案仍可能有型別錯誤、缺失宣告或無法解析的匯入。

輸出會變成 JavaScript 嗎？

不會。型別註解仍然存在；需要可執行 JavaScript 時，應使用專案正常的編譯或轉譯流程。

什麼時候應明確選擇 TSX？

來源文字包含 JSX 或可能有歧義的尖括號時，明確選擇 TSX，讓解析器選擇可被核對，而不是依賴自動判斷。

Web 開發

TypeScript／TSX 程式碼格式化

使用 Prettier 在瀏覽器本機整理 TypeScript 與 TSX 的縮排、換行與空白；可指定 TS、TSX，或以 JSX 片段啟發式選擇語法。

線上工具價格方案

輸入0 個字元

結果0 個字元

想要更順手的原生工作流程？

把「TypeScript／TSX 程式碼格式化」放進一個快速鍵。

DevSexy Mac 版保留同樣私密的本機處理，同時提供全域快速鍵；不用管理瀏覽器分頁，需要時直接叫出。

全域快速鍵可離線使用本機處理

免費試用 Mac 版

目前的瀏覽器工具仍然免費。

同一組尖括號 · 可能屬於兩套語法

先說清楚：這段程式碼是否包含 JSX。

在 .ts 裡，尖括號可能是泛型或舊式型別斷言；在 .tsx 裡，相同 token 也可能開啟 JSX。auto 只依常見標記片段選擇檔案語境，遇到 <T> 等歧義時，請明確指定 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 重新安排換行和空白。

格式化結果

型別與註解仍是原始碼；沒有任何程式被執行。

四條能力界線

格式化成功，不代表建置會通過。

Typecheck

這些型別在專案情境中真的相容嗎？

Next: tsc --noEmit

Lint

程式碼是否符合語意與 repo 規則？

Next: ESLint

Transpile

目標瀏覽器或 runtime 要接收哪種 JavaScript？

Next: tsc / bundler

Execute

程式在執行時會產生什麼行為？

Next: 測試 / runtime

回到 repo 設定

線上整理一次，最後仍要與程式碼庫對齊。

瀏覽器

選擇 TS 或 TSX；只有語法沒有歧義時才交給 auto。

編輯器

使用 repo 指定的 Prettier 版本、設定與 format-on-save。

Commit

檢查格式化 diff，確認沒有混入手動語意修改。

CI

讓 prettier --check、lint 與 typecheck 分別負責自己的檢查。

執行可重現的範例

用對應解析模式格式化型別註解和 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 attribute 與簡單 inline style，輸出 Fragment、JSX component 或 TSX component 骨架。

JSON Schema 驗證 / OpenAPI 檢視

在瀏覽器本機依 JSON Schema 驗證 JSON／YAML 資料實例並追蹤錯誤路徑，或盤點 OpenAPI 文件的路徑與 HTTP 方法增刪。

在 DevSexy Mac 應用程式中重複處理

反覆處理本機資料時，可透過 Option 快捷鍵開啟原生應用程式，離線使用工具。

直接回答

什麼是 TypeScript／TSX 程式碼格式化？

線上使用 Prettier 格式化 TypeScript 與 TSX，可選 TS、TSX 或 auto；程式碼在瀏覽器本機處理，auto 只辨識常見 JSX 標記，格式化不會 typecheck、lint、轉譯或執行。

它能做什麼？

格式化

如何使用 TypeScript／TSX 程式碼格式化

01
準備輸入
尖括號存在歧義時，明確選擇 TypeScript 或 TSX。
02
選擇操作
設定縮排與換行寬度，再格式化。
03
核對結果
在專案中執行 tsc 和測試，檢查型別、匯入及元件行為。

常見問題

會執行 TypeScript 型別檢查器嗎？: 不會。工具只解析和列印 TypeScript 或 TSX，語法透過的檔案仍可能有型別錯誤、缺失宣告或無法解析的匯入。
輸出會變成 JavaScript 嗎？: 不會。型別註解仍然存在；需要可執行 JavaScript 時，應使用專案正常的編譯或轉譯流程。
什麼時候應明確選擇 TSX？: 來源文字包含 JSX 或可能有歧義的尖括號時，明確選擇 TSX，讓解析器選擇可被核對，而不是依賴自動判斷。