Prettier 如何处理代码格式化

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

Prettier 是一个流行的代码格式化工具，它可以帮助开发者保持代码风格的一致性。Prettier 通过一系列规则和选项来处理代码格式化，使得代码更加整洁和易读。本文将详细介绍 Prettier 如何处理代码格式化。

1. 缩进和空格

Prettier 使用制表符或空格来缩进代码。你可以在 Prettier 配置文件中设置缩进选项：

{
  "tabWidth": 2,
  "useTabs": false
}

在这个示例中，我们设置了缩进宽度为 2 个空格，并且不使用制表符。

Prettier 还会自动在二元运算符（如 +、-、*、/ 等）两侧添加空格，使得代码更加易读。

2. 分号和引号

Prettier 可以自动在语句末尾添加分号，并且可以选择使用单引号或双引号。你可以在 Prettier 配置文件中设置这些选项：

{
  "semi": true,
  "singleQuote": true
}

在这个示例中，我们设置了在语句末尾添加分号，并且使用单引号。

3. 换行和空行

Prettier 会自动在代码块、数组、对象等结构中添加换行和空行，使得代码更加整洁。你可以在 Prettier 配置文件中设置这些选项：

{
  "printWidth": 80,
  "trailingComma": "none"
}

在这个示例中，我们设置了每行代码的最大长度为 80 个字符，并且在多行结构的最后一行末尾不添加逗号。

4. 样式规则

Prettier 还提供了一些样式规则，用于处理 CSS、SCSS、LESS、HTML 等文件。你可以在 Prettier 配置文件中设置这些规则：

{
  "cssPrintWidth": 80,
  "cssTrailingComma": "none"
}

在这个示例中，我们设置了 CSS 文件每行代码的最大长度为 80 个字符，并且在多行结构的最后一行末尾不添加逗号。

5. 自定义规则

Prettier 允许你自定义一些规则，以满足项目的需求。你可以在 Prettier 配置文件中添加自定义规则：

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

在这个示例中，我们为 JavaScript 文件设置了缩进宽度为 4 个空格。

6. 总结

Prettier 通过一系列规则和选项来处理代码格式化，使得代码更加整洁和易读。通过配置 Prettier，开发者可以自定义 Prettier 的行为，满足项目的需求。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。