Prettier代码格式化工具安装与配置指南

Prettier代码格式化工具安装与配置指南

prettier prettier/prettier: 是一个开源的代码格式化工具，用于提高代码可读性和一致性。它支持多种编程语言和格式化规则，可以帮助开发者快速格式化代码，提高开发效率。特点包括易于使用、自动格式化、支持多种语言和格式规则等。 项目地址: https://gitcode.com/gh_mirrors/pr/prettier

什么是Prettier

Prettier是一款现代化的代码格式化工具，它通过解析代码并重新输出符合统一风格的代码，帮助开发团队保持代码风格的一致性。与传统的linter不同，Prettier不进行代码质量检查，而是专注于代码格式的统一。

安装Prettier

本地项目安装

建议在项目中本地安装Prettier，这样可以确保团队成员使用相同版本的Prettier，避免因版本差异导致的格式不一致问题。

根据你使用的包管理器，选择以下命令之一：

# npm用户
npm install --save-dev --save-exact prettier

# yarn用户
yarn add --dev --exact prettier

# pnpm用户
pnpm add --save-dev --save-exact prettier

# bun用户
bun add --dev --exact prettier

重要说明：使用--exact参数可以锁定Prettier的精确版本，这是非常重要的，因为不同版本的Prettier可能会有细微的格式化差异。

配置Prettier

创建配置文件

创建一个空的.prettierrc文件，告知编辑器和工具你正在使用Prettier：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

这个空对象表示使用Prettier的默认配置。你也可以在其中添加自定义规则，例如：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

创建忽略文件

创建.prettierignore文件，指定不需要格式化的文件和目录：

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Prettier会自动遵循项目中的.gitignore规则。如果你的项目有.eslintignore文件，也可以基于它来创建.prettierignore。

使用Prettier格式化代码

格式化整个项目

# npm用户
npx prettier . --write

# yarn用户
yarn exec prettier . --write

# pnpm用户
pnpm exec prettier . --write

# bun用户
bun exec prettier . --write

格式化特定文件或目录

对于大型项目，可以只格式化特定部分：

# 格式化特定目录
prettier --write src/

# 格式化特定文件
prettier --write src/components/Button.js

# 使用glob模式格式化文件
prettier --write "src/**/*.test.js"

CI集成

在持续集成环境中，使用--check参数检查代码是否已格式化：

npx prettier . --check

这会返回非零退出码如果发现未格式化的文件，非常适合在CI流水线中使用。

编辑器集成

虽然命令行工具很有用，但最佳的开发体验是将Prettier集成到你的编辑器中。大多数现代编辑器都支持Prettier插件，可以实现：

• 保存时自动格式化
• 快捷键手动格式化
• 实时显示格式化建议

重要提示：即使配置了编辑器插件，仍然需要在项目中本地安装Prettier，这样编辑器插件才能使用项目指定的Prettier版本。

与Linter工具集成

如果你使用ESLint或Stylelint等lint工具，需要安装额外的配置以避免规则冲突：

• 对于ESLint：安装eslint-config-prettier
• 对于Stylelint：安装stylelint-config-prettier

这些配置会关闭所有与Prettier冲突或不必要的lint规则。

Git钩子配置

为了确保每次提交的代码都是格式化后的，可以设置pre-commit钩子：

1. 安装必要的工具：

# npm用户
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

# yarn用户
yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','yarn lint-staged\n')"

# pnpm用户
pnpm add --save-dev husky lint-staged
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"

# bun用户
bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"

2. 在package.json中添加配置：

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

最佳实践总结

1. 精确版本控制：始终使用--exact安装Prettier，锁定特定版本
2. 项目级配置：每个项目都应该有自己的Prettier配置
3. 忽略不需要的文件：通过.prettierignore避免格式化生成文件
4. CI集成：在持续集成中检查代码格式
5. 编辑器集成：配置编辑器插件获得最佳开发体验
6. 与linter配合：使用专用配置避免规则冲突
7. Git钩子：设置pre-commit钩子确保每次提交都是格式化代码

通过遵循这些步骤，你可以确保团队中的每个成员都使用相同的代码风格，大大减少代码审查中关于格式的讨论，提高开发效率。

prettier prettier/prettier: 是一个开源的代码格式化工具，用于提高代码可读性和一致性。它支持多种编程语言和格式化规则，可以帮助开发者快速格式化代码，提高开发效率。特点包括易于使用、自动格式化、支持多种语言和格式规则等。 项目地址: https://gitcode.com/gh_mirrors/pr/prettier