TypeScript 如何配置 Prettier

很多前端小伙伴刚开始用 TypeScript 写代码时，常会遇到一个小麻烦：明明写的代码逻辑没问题，可团队协作时，不同人写出来的缩进、引号、换行格式乱七八糟， reviewer 要花大量时间核对格式，反而耽误看核心功能。这时候，用 Prettier 统一格式化代码就成了关键。

先搞懂：Prettier 和 TypeScript 为啥能“搭伙”？

Prettier 是个“代码格式化小管家”，不管是 JS、CSS 还是 TS，只要配好规则，它能自动把代码调整成统一格式。而 TypeScript 只是 JS 的超集，相当于多了类型标注，Prettier 从 1.13 版本开始就原生支持 TS 了，不用额外折腾复杂的转换，直接就能用，相当于给 TypeScript 代码套上了“统一模板”。

第一步：给项目装对工具，别装错

先打开项目终端，进入你的前端文件夹，用 npm 或者 yarn 装 Prettier 以及它和 TypeScript 配套的插件。这里要注意，别只装 Prettier，得加上 @prettier/plugin-typescript，它是专门处理 TS 格式的：

`bash

npm install --save-dev prettier @prettier/plugin-typescript

或者用 yarn 的话：yarn add --dev prettier @prettier/plugin-typescript

`

装完后，项目根目录会多一个 node_modules 文件夹，Prettier 的核心功能和 TS 插件就都在里面了。

第二步：写个简单的配置文件，定好“格式规矩”

光装工具还不够，得告诉 Prettier 你要啥样的格式。在项目根目录新建一个叫 .prettierrc 的文件（这个是 Prettier 的默认配置文件名，系统会自动识别），里面用 JSON 写规则就行，都是通俗易懂的选项：

`json

{

"semi": true,

"singleQuote": true,

"tabWidth": 2,

"trailingComma": "es5"

}

`

解释下这些规则：

• semi: true 就是每行代码末尾加分号，符合大部分团队习惯；
• singleQuote: true 用单引号代替双引号，写字符串时不用再纠结引号切换；
• tabWidth: 2 是缩进用 2 个空格，不会出现有的项目用 4 个空格的混乱；
• trailingComma: "es5" 是数组、对象最后一项加逗号，比如 const arr = [1,2,];，复制粘贴时不会少加逗号出 bug。

第三步：加个“一键格式化”命令，省时间

总不能每次打开文件手动输命令格式化吧？给 package.json 加个脚本，点一下就能全项目格式化。打开 package.json，在 scripts 里加一行：

`json

"scripts": {

"format": "prettier --write \"src/**/*.ts\""

}

`

这里的 src/**/*.ts 就是告诉 Prettier，格式化 src 文件夹里所有 .ts 结尾的文件。以后只要在终端输 npm run format，整个项目的 TS 代码就自动按规则排好队了。

避坑提醒：别让 ESLint 和 Prettier “打架”

很多项目会同时用 ESLint 检查代码逻辑，Prettier 管格式，这俩有时会冲突。比如 ESLint 要求用双引号，Prettier 要单引号，就会报错。这时候只要装个 eslint-config-prettier，把 ESLint 里和格式有关的规则关掉就行：

`bash

npm install --save-dev eslint-config-prettier

`

然后在 .eslintrc 里加一行 extends: ["prettier"]，就不会冲突了。

这样一套下来，不管是你自己写代码，还是和小伙伴协作，TS 代码的格式都能保持一致，不用再为格式问题吵架，把精力放在写功能上就好。