Prettier是提升JavaScript代码可读性和团队协作效率的主流格式化工具,支持多种语言,能自动处理空格、换行、引号等格式问题。通过npm或yarn在项目中本地安装可避免版本不一致问题。支持配置文件如.prettierrc或prettier.config.js来自定义规则,常用配置包括semi、singleQuote、trailingComma、printWidth和tabWidth。集成到VS Code等编辑器后可实现保存时自动格式化。若项目使用ESLint,需安装eslint-config-prettier并配置extends以消除规则冲突,实现ESLint负责代码质量、Prettier统一代码风格的分工协作,从而减少代码审查争议,提升开发体验。

JavaScript代码格式化是提升项目可读性和团队协作效率的重要环节,Prettier 是目前最流行的代码格式化工具之一。它支持多种语言,尤其在 JavaScript 生态中被广泛使用。Prettier 能自动处理代码的空格、换行、引号、括号等格式问题,让团队无需在代码风格上争论。
安装 Prettier
Prettier 可以通过 npm 或 yarn 安装到项目中:
- npm install --save-dev prettier
- yarn add --dev prettier
建议在项目本地安装,避免不同环境中版本不一致导致格式差异。
配置 Prettier
Prettier 支持通过配置文件自定义格式规则。可在项目根目录创建配置文件,如 .prettierrc(JSON 格式)或 prettier.config.js(JS 格式)。
立即学习“Java免费学习笔记(深入)”;
示例 .prettierrc 文件:
{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2 }常用配置说明:
- semi:是否在语句末尾加分号
- singleQuote:是否使用单引号代替双引号
- trailingComma:是否在对象或数组最后一个元素后添加逗号(可选值:'none', 'es5', 'all')
- printWidth:每行最大字符数,超过则换行
- tabWidth:缩进空格数
与编辑器集成
将 Prettier 集成到编辑器中可以实现保存时自动格式化。以 Visual Studio Code 为例:
- 在扩展市场搜索并安装 “Prettier - Code formatter”
- 在 VS Code 设置中启用 “Format On Save”
- 设置默认格式化工具为 Prettier
这样每次保存文件时,Prettier 会自动运行并格式化代码。
与 ESLint 协同工作
若项目已使用 ESLint,建议安装 eslint-config-prettier 来禁用所有与 Prettier 冲突的 ESLint 规则。
npm install --save-dev eslint-config-prettier然后在 .eslintrc 中添加:
{ "extends": ["eslint:recommended", "prettier", "plugin:prettier/recommended"] }这样 ESLint 负责代码质量检查,Prettier 负责代码风格统一,职责分明。
基本上就这些。Prettier 让代码格式变得简单又一致,减少不必要的代码审查争议,提升开发体验。










