TypeScript 如何做代码格式化

平时我们写代码的时候，常会遇到一种“各写各的”尴尬：有人习惯用4个空格缩进，有人爱用2个；有人喜欢在函数括号前后留空格，有人觉得没必要；甚至有人写注释时喜欢用全角符号，有人就爱用半角。这些小习惯凑在一起，不仅看代码的人费眼，团队协作时还容易因为格式问题吵嘴。TypeScript 作为 JavaScript 的超集，也逃不开这个问题，而代码格式化就是帮我们把这些“散兵游勇”收编成规规矩矩“队伍”的工具。

为什么 TypeScript 代码需要专门格式化？

可能有人会问：“JavaScript 不是也能格式化吗？为啥 TypeScript 要单独来？”这是因为 TypeScript 多了类型注解、接口、泛型这些“专属功能”。比如写一个泛型函数时，function foo<T>(arg: T): void，如果格式乱了，很容易把类型参数和参数列表挤成一团，变成function foo <T>(arg : T) : void，看起来乱糟糟的。专门的 TypeScript 格式化工具，能精准识别这些语法，不会像普通 JS 工具那样把类型注解拆得七零八落。就像给带配件的玩具专门配收纳盒，不会把小零件弄丢。

常用的 TypeScript 格式化工具怎么选？

目前最常用的就是两个“黄金搭档”：Prettier 和 ESLint，还有个更简单的 Biome。

先说说 Prettier，它就像个“自动排版机”，你只要告诉它规则，它就会把缩进、换行、引号这些细节全部搞定。比如你写了一句很长的数组：const fruits = ["apple", "banana", "orange", "mango", "grape"]，如果窗口不够宽，它会自动把每个水果单独放一行，既整齐又好读。

再说说 ESLint，它更像个“规矩检查员”，除了格式，还能帮你揪出语法错误、变量未定义这些问题，同时也能设置格式化规则。比如你想让 ESLint 规定“必须用单引号，不能用双引号”，它就会把你写的双引号自动改成单引号。

Biome 则是后来的“全能选手”，把 Prettier 和 ESLint 的功能合二为一，安装一次就能搞定，不用再配置两个工具，适合怕麻烦的新手。

怎么快速上手设置格式化？

以最常用的 Prettier 为例，操作起来特别简单：

第一步，用 npm 把 Prettier 装到项目里，命令行输npm install --save-dev prettier就行，不用全局装，避免和其他项目冲突。

第二步，在项目根目录建个叫.prettierrc的文件，这就是“规则手册”。比如你可以写{ "semi": true, "singleQuote": true, "tabWidth": 2 }，意思是“每行末尾要加分号，用单引号，缩进是2个空格”。

第三步，告诉 Prettier 只格式化 TypeScript 文件，建个.prettierignore文件，里面写node_modules/这些不需要格式化的文件夹。

最后，在代码编辑器里装个 Prettier 的插件，比如 VS Code 里搜“Prettier - Code formatter”，装完后设置“保存时自动格式化”，每次写完代码点一下保存，它就自动把格式理得漂漂亮亮，就像写完作业让家长帮忙检查修正一样。

格式化后要注意什么？

格式化不是“一劳永逸”，有两个小细节要留意：一是不要把自动格式化当成“乱写代码的借口”，如果代码逻辑乱，就算格式再整齐，别人也看不懂；二是团队一定要统一规则，比如你喜欢4个空格缩进，队友喜欢2个，提前在.prettierrc里定好，不然你改完他又改回来，反而浪费时间。就像班级里统一用统一的作业本，没人再纠结用哪种本子一样。

其实 TypeScript 代码格式化本质上就是“把模糊的习惯变成明确的规则”，不管用哪个工具，核心都是让代码更易读、团队协作更顺畅。只要花十几分钟配置好，之后每次写代码都能省掉手动调整格式的麻烦，慢慢也就养成了写规范代码的习惯。