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

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

TypeScript／TSX 程式碼格式化能做什麼？

TypeScript／TSX 程式碼格式化支援格式化，所有模式都能直接在目前頁面使用。

TypeScript／TSX 程式碼格式化會上傳我的資料嗎？

TypeScript／TSX 程式碼格式化會在瀏覽器中處理輸入內容。DevSexy 不會增加上傳、登入或伺服器處理步驟。

TypeScript／TSX 線上格式化工具

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

先說清楚：這段程式碼是否包含 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 分別負責自己的檢查。

TypeScript／TSX 程式碼格式化