AI摸鱼工具 摸鱼工具网

手把手教你用Prettier统一代码风格 告别格式化争吵

时间： 作者： 阅读：97
在团队协作开发中，代码风格不一致往往是引发“战争”的导火索。有人喜欢双引号，有人坚持单引号；有人习惯缩进两格，有人偏爱四个空格。这些看似微小的差异，在代码审查时却会消耗大量精力。幸运的是，我们有Prettier这样的代码格式化工具，它能够强制统一代码风格，让团队协作更加顺畅。本文将带你从零开始，一步步配置并使用Prettier，彻底告别格式化之争。 为什么选择Prettier？ Prettier

在团队协作开发中，代码风格不一致往往是引发“战争”的导火索。有人喜欢双引号，有人坚持单引号；有人习惯缩进两格，有人偏爱四个空格。这些看似微小的差异，在代码审查时却会消耗大量精力。幸运的是，我们有Prettier这样的代码格式化工具，它能够强制统一代码风格，让团队协作更加顺畅。本文将带你从零开始，一步步配置并使用Prettier，彻底告别格式化之争。

为什么选择Prettier？

Prettier是一款广受欢迎的前端代码格式化工具，它支持JavaScript、TypeScript、CSS、HTML、Markdown等几乎所有主流前端文件格式。与传统的Lint工具（如ESLint）不同，Prettier专注于代码格式化，它采用“少数服从多数”的原则，提供了极少的配置选项，目的就是让团队不再为格式问题争论不休。只要所有人都使用Prettier，代码风格自然就统一了。

第一步：安装Prettier

使用npm或yarn在项目中安装Prettier是最常规的方式。建议将Prettier作为开发依赖安装，因为它只在开发阶段使用。打开终端，切换到项目根目录，执行以下命令：

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

# 或者使用yarn
yarn add --dev --exact prettier

注意：--exact参数会将Prettier锁定为精确版本，避免团队中因为版本差异导致格式化结果不一致。这是一个非常推荐的实践。

第二步：创建Prettier配置文件

Prettier支持多种配置文件格式，包括.prettierrc（JSON或YAML格式）、.prettierrc.js（JavaScript格式）等。在项目根目录创建.prettierrc文件，并写入以下基础配置：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

这些配置的含义分别是：

· printWidth：每行代码最大宽度，超过则换行，设置为100比较适合大多数屏幕。

· tabWidth：缩进空格数，通常为2。

· useTabs：是否使用Tab缩进，这里设为false，统一使用空格。

· semi：是否在语句末尾添加分号，设为true。

· singleQuote：是否使用单引号，设为true更符合JavaScript社区惯例。

· trailingComma：多行结构是否添加尾逗号，'es5'表示在ES5允许的语法中添加（如对象、数组）。

· bracketSpacing：对象字面量花括号内是否添加空格，如{ foo: 'bar' }。

· arrowParens：箭头函数参数是否始终加圆括号，'always'保证一致性。

· endOfLine：行尾序列，'lf'（Unix风格）是跨平台最兼容的选择。

当然，你也可以根据团队约定调整这些值。但请记住，Prettier的哲学是“少配置”，过多的自定义反而会失去统一性。

第三步：配置忽略文件

项目中总有一些文件不需要格式化（如构建产物、第三方库等）。创建.prettierignore文件，语法与.gitignore类似：

node_modules
dist
build
package-lock.json
yarn.lock
*.min.js
*.map

这样Prettier就会自动跳过这些文件和目录，加快格式化速度。

第四步：集成到VS Code编辑器

安装Prettier的VS Code扩展是体验最佳的方式。打开VS Code的扩展面板，搜索“Prettier - Code formatter”并安装。安装后，需要进行以下设置来获得最佳体验：

// 在VS Code的settings.json中添加
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

formatOnSave是核心设置——文件保存时自动格式化。这样你无需手动执行命令，代码保存后立刻变为规范格式。你也可以为不同语言设置单独的formatter，但使用Prettier作为默认值通常已经足够。

第五步：命令行批量格式化

如果你需要快速格式化整个项目的文件，可以在package.json的scripts中添加快捷命令：

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,ts,json,md,css,html}\""
  }
}

然后运行npm run format，Prettier就会自动查找并格式化src目录下所有匹配的文件。使用--write参数会直接覆盖原文件，若想检查而不修改，可以使用--check参数：

npx prettier --check "src/**/*.js"

这在CI/CD流程中非常有用，可以确保提交的代码都符合格式规范。

第六步：与ESLint协同工作

Prettier负责格式，ESLint负责代码质量。两者功能有重叠，但不冲突。推荐用eslint-config-prettier来关闭ESLint中与格式相关的冲突规则，让Prettier全权接管格式：

# 安装
npm install --save-dev eslint-config-prettier

# 在.eslintrc.js中的extends数组末尾添加'prettier'
extends: [
  'some-other-config',
  'prettier'
]

这样，ESLint只关注代码错误和潜在的bug，而Prettier负责格式，各司其职，效率最大化。

第七步：在GitHook中强制执行

为了确保所有团队成员提交的代码都经过格式化，可以使用husky和lint-staged。它们可以在提交代码前自动对暂存区文件运行Prettier：

# 安装husky和lint-staged
npm install --save-dev husky lint-staged

# 在package.json中配置
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,css,json,md,html}": [
      "prettier --write",
      "git add"
    ]
  }
}

这样，每次git提交时，钩子都会自动运行，格式不规范的代码在提交前就被修正了。这能从根本上避免格式问题进入代码仓库。

福利：使用“摸鱼点击工具”辅助开发

在配置和调试Prettier时，如果觉得步骤繁琐，可以借助一些可视化工具来简化流程。例如，“摸鱼点击工具”就提供了一些便捷的代码处理功能，可以在浏览器中快速预览格式化效果，帮助理解Prettier的规则。这对新手来说是一个不错的辅助手段，但正式项目仍需依赖CLI工具集成到工作流中。

总结

通过以上七个步骤，你已经在项目中成功集成了Prettier，并配置了保存时自动格式化、命令行批量处理以及Git提交前的强制检查。团队成员不再需要手动调整空格和引号，可以在Code Review时专注于真正的逻辑问题。代码风格统一带来的不仅是视觉上的整洁，更是团队协作效率的大幅提升。现在就把Prettier用起来，让你的代码库保持优雅与一致吧！

免责声明：本文内容来源于公开资料、用户提交或站内整理，仅供学习与参考，不构成任何投资、医疗、法律或专业建议。请结合实际情况自行判断，相关风险由使用者自行承担。
上一篇
下一篇

相关文章