JavaScriptPrettier格式化使用技巧

Prettier 是 JavaScript 开发中提升代码可读性、统一团队风格并显著改善协作效率的必备格式化利器——它能全自动处理空格、换行、引号、逗号等繁琐细节，通过本地安装、灵活配置（如分号、单引号、行宽、缩进等）、VS Code 一键保存即格式化，以及与 ESLint 的无缝协同（用 eslint-config-prettier 消除冲突），真正实现“写代码专注逻辑，格式交给 Prettier”，大幅减少审阅争议、降低沟通成本，让开发者享受更清爽、更高效、更一致的编码体验。

JavaScript代码格式化是提升项目可读性和团队协作效率的重要环节，Prettier 是目前最流行的代码格式化工具之一。它支持多种语言，尤其在 JavaScript 生态中被广泛使用。Prettier 能自动处理代码的空格、换行、引号、括号等格式问题，让团队无需在代码风格上争论。

安装 Prettier

Prettier 可以通过 npm 或 yarn 安装到项目中：

建议在项目本地安装，避免不同环境中版本不一致导致格式差异。

配置 Prettier

Prettier 支持通过配置文件自定义格式规则。可在项目根目录创建配置文件，如 .prettierrc（JSON 格式）或 prettier.config.js（JS 格式）。

示例 .prettierrc 文件：

常用配置说明：

• 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 规则。

然后在 .eslintrc 中添加：

这样 ESLint 负责代码质量检查，Prettier 负责代码风格统一，职责分明。

基本上就这些。Prettier 让代码格式变得简单又一致，减少不必要的代码审查争议，提升开发体验。

今天关于《JavaScriptPrettier格式化使用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！