184 - 代码检查工具 - Prettier - Prettier 的代码格式化

代码检查工具 - Prettier - Prettier 的代码格式化

在前端开发的世界里，代码的可读性和一致性是至关重要的。想象一下，当一个项目由多个开发者共同参与时，如果每个人都有自己独特的代码风格，那代码库将会变得杂乱无章，维护起来也会困难重重。这时，代码格式化工具就显得尤为重要，而 Prettier 就是其中的佼佼者。

什么是 Prettier

Prettier 是一个 Opinionated（固执己见）的代码格式化工具，它会强制执行一套统一的代码风格。与其他一些代码检查工具不同，Prettier 并不纠结于代码的质量和潜在的错误，而是专注于代码的外观和格式。它支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML 等，能够自动将代码格式化为一致的风格，让团队成员无需再为代码风格的问题争论不休。

为什么选择 Prettier

一致性

Prettier 会按照预设的规则对代码进行格式化，无论团队中有多少开发者，代码风格都能保持一致。这使得代码更易于阅读和维护。

节省时间

开发者无需手动调整代码格式，Prettier 会自动完成这一工作。这样可以让开发者将更多的时间和精力放在业务逻辑的实现上。

支持多种语言

Prettier 支持多种前端开发中常用的语言，这意味着你可以使用一个工具来格式化整个项目的代码。

集成方便

Prettier 可以很方便地集成到各种开发工具和工作流中，如 VS Code、WebStorm 等代码编辑器，以及 Git Hooks、CI/CD 等工作流。

Prettier 的使用

安装

可以使用 npm 或 yarn 来安装 Prettier：

# 使用 npm 安装
npm install --save-dev --save-exact prettier
# 使用 yarn 安装
yarn add --dev --exact prettier

创建配置文件

为了让 Prettier 按照我们的需求进行代码格式化，可以创建一个 .prettierrc 文件。例如，以下是一个简单的配置文件：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

这个配置文件的含义如下：
| 配置项 | 含义 |
| —— | —— |
| singleQuote | 使用单引号而不是双引号 |
| trailingComma | 在对象和数组的最后一个元素后面添加逗号，遵循 ES5 规范 |
| printWidth | 每行代码的最大宽度为 80 个字符 |

格式化代码

安装并配置好 Prettier 后，就可以使用它来格式化代码了。可以通过命令行直接运行 Prettier：

# 格式化所有 JavaScript 文件
npx prettier --write "src/**/*.js"

--write 参数表示直接修改文件内容，将代码格式化为 Prettier 推荐的风格。

在 VS Code 中集成 Prettier

VS Code 是一款非常流行的代码编辑器，Prettier 提供了官方的 VS Code 插件，可以方便地在编辑器中使用。

1. 打开 VS Code，在扩展商店中搜索 Prettier - Code formatter 并安装。
2. 打开 VS Code 的设置（File > Preferences > Settings），搜索 editor.defaultFormatter，将其设置为 esbenp.prettier-vscode。
3. 启用保存时自动格式化功能，搜索 editor.formatOnSave 并勾选。

这样，当你保存文件时，Prettier 会自动对代码进行格式化。

示例代码

以下是一个未格式化的 JavaScript 代码示例：

function add( a,  b ){
  return a + b;
}

使用 Prettier 格式化后：

function add(a, b) {
  return a + b;
}

可以看到，Prettier 自动调整了代码的缩进、空格和括号的位置，使代码更加整洁易读。

总结

Prettier 是一个强大的代码格式化工具，它能够帮助开发者保持代码的一致性和可读性，节省时间和精力。通过简单的安装、配置和集成，就可以在项目中使用 Prettier 来格式化代码。无论是个人项目还是团队项目，Prettier 都是一个值得推荐的工具。

在实际开发中，建议将 Prettier 集成到开发工具和工作流中，让代码格式化成为开发过程的一部分。这样可以确保代码库始终保持一致的风格，提高代码的可维护性和团队的开发效率。