精通 Prettier:进阶配置与最佳实践

简介: 【10月更文挑战第18天】Prettier 是一款流行的代码格式化工具,它能够帮助开发者保持代码风格的一致性,减少因代码风格争议而产生的争论。本文将深入探讨如何根据项目需求进行详细的配置选项调整,并分享一些使用 Prettier 的最佳实践,包括如何通过 Git 钩子自动化代码格式化过程以及如何解决常见的配置冲突问题。

Prettier 是一款流行的代码格式化工具,它能够帮助开发者保持代码风格的一致性,减少因代码风格争议而产生的争论。本文将深入探讨如何根据项目需求进行详细的配置选项调整,并分享一些使用 Prettier 的最佳实践,包括如何通过 Git 钩子自动化代码格式化过程以及如何解决常见的配置冲突问题。
1111.png

Prettier 进阶配置

Prettier 提供了许多可配置的选项,允许开发者根据自己的项目需求来定制格式化规则。下面是一些常见的配置选项及其用途:

配置文件

Prettier 支持多种配置文件格式,如 .prettierrc.prettierrc.json.prettierrc.yaml 或者 package.json 中的 prettier 字段。为了便于维护,推荐使用 JSON 文件。

示例配置文件

{
   
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "parser": "typescript",
  "printWidth": 100,
  "proseWrap": "preserve"
}
  • tabWidth: 设置制表符的宽度,默认为 2。
  • useTabs: 控制是否使用 Tab 键来代替空格,默认为 false
  • semi: 是否在语句末尾使用分号,默认为 true
  • singleQuote: 控制字符串是否使用单引号,默认为 true
  • jsxSingleQuote: JSX 属性值是否使用单引号,默认为 true
  • trailingComma: 控制是否在最后一个元素后使用尾随逗号,默认为 "es5"
  • bracketSpacing: 控制对象字面量的括号内是否有空格,默认为 true
  • jsxBracketSameLine: 控制 JSX 属性是否在同一行内关闭,默认为 false
  • arrowParens: 控制箭头函数参数的括号使用情况,默认为 "avoid"
  • endOfLine: 文件的换行符类型,默认为 "lf"
  • parser: 指定使用的解析器,默认为 "babylon"
  • printWidth: 每行的最大字符数,默认为 80。
  • proseWrap: 控制 prose 文本的换行,默认为 "preserve"

解决配置冲突

在团队协作中,可能会遇到不同工具之间的配置冲突。例如,ESLint 和 Prettier 可能会对同一份代码有不同的格式要求。为了避免这种情况,可以使用 eslint-config-prettierprettier-eslint 等插件来统一 ESLint 和 Prettier 的规则。

示例:整合 ESLint 和 Prettier

.eslintrc.js 文件中添加 prettier 插件:

module.exports = {
   
  plugins: ['prettier'],
  extends: ['plugin:prettier/recommended'],
  rules: {
   
    'prettier/prettier': 'error',
    // 可以在这里添加其他规则
  }
};

使用 Git 钩子自动化代码格式化

在提交代码之前自动运行 Prettier 是一种确保代码格式始终符合约定的好方法。通过 Git 钩子,可以在每次提交之前自动格式化修改过的文件。

设置 Git 钩子

创建 husky 配置文件

首先,安装 huskylint-staged

npm install husky lint-staged --save-dev

接着,在仓库根目录下创建一个 husky 文件夹,并在其中创建 pre-commit 文件:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

配置 lint-staged

在仓库根目录下创建 .lintstagedrc.js 文件:

module.exports = {
   
  '*.{js,jsx,ts,tsx}': files => [
    `npx prettier --write ${
     files.join(' ')}`,
    `npx eslint --fix ${
     files.join(' ')}`,
  ],
};

这样每当有代码提交时,Prettier 和 ESLint 将自动运行。

最佳实践

维护一致的代码风格

确保团队中的每个人都使用相同的 Prettier 配置,这样可以避免代码风格上的差异导致的问题。

定期更新 Prettier

随着新版本的发布,Prettier 不断引入新的功能和改进。定期更新可以确保使用的是最新版本,并享受其带来的好处。

使用 Prettier CLI

Prettier 提供了一个命令行工具,可以直接在终端中使用。例如,可以使用 npx prettier --write . 来格式化整个项目的文件。

结论

通过合理的配置和最佳实践,Prettier 可以成为提高代码质量和团队生产力的强大工具。本文介绍了如何根据项目需求调整 Prettier 的配置选项,并通过 Git 钩子自动化代码格式化过程。此外,还分享了如何解决配置冲突问题以及一些实用的建议。掌握这些技巧后,你可以更加自信地使用 Prettier 来管理你的代码样式。

目录
相关文章
|
11月前
|
JavaScript 前端开发 持续交付
Prettier 高级应用:集成 CI/CD 流水线与插件开发
【10月更文挑战第18天】Prettier 是一款流行的代码格式化工具,它能够自动将代码格式化成一致的风格,从而提高代码的可读性和维护性。对于希望进一步发挥 Prettier 潜力的高级用户而言,将 Prettier 集成到持续集成(CI)和持续部署(CD)流程中,确保每次提交的代码都符合团队标准,是非常重要的。此外,通过开发自定义插件来支持更多语言或扩展 Prettier 的功能也是值得探索的方向。本文将详细介绍这两方面的内容。
219 2
|
移动开发 缓存 JavaScript
2021最新阿里代码规范(前端篇)
2021最新阿里代码规范(前端篇)
55818 11
2021最新阿里代码规范(前端篇)
postcss-px-to-viewport-8-plugin 适配
postcss-px-to-viewport-8-plugin 适配
1670 0
|
11月前
|
资源调度 JavaScript 前端开发
Prettier 入门:让代码整洁如一
【10月更文挑战第18天】在软件开发过程中,代码的可读性对于团队协作和个人工作效率都至关重要。良好的代码格式不仅能提高代码的可读性,还能减少因风格差异引起的代码审查时间。Prettier 是一款自动代码格式化工具,能够帮助开发者快速统一代码风格,使得团队成员编写的代码具有一致性。本文将介绍 Prettier 的基本用法、安装方式以及如何在常见编辑器中设置和使用 Prettier。
790 4
|
JSON 资源调度 前端开发
前端工具 Prettier 详细使用流程(兼容ESLint)
前端工具 Prettier 详细使用流程(兼容ESLint)
435 0
|
10月前
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
750 8
|
存储 缓存 JavaScript
npm link 与 pnpm link 的用法以及不同之处
npm link 与 pnpm link 的用法以及不同之处
1058 0
|
消息中间件 缓存 负载均衡
秒杀系统优化:用解耦提升系统性能的秘诀!
大家好,我是小米,一个热爱分享技术经验的29岁程序员。本文主要探讨了解耦的概念及其在秒杀系统中的应用,特别是如何通过解耦提升系统的扩展性和容错能力。文中对比了HTTP/RPC同步调用和消息队列两种方式,分析了各自的优缺点及适用场景,帮助大家更好地选择合适的解耦方案。希望本文能让大家对解耦有更深入的理解。
207 8
秒杀系统优化:用解耦提升系统性能的秘诀!
|
10月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2087 4
|
JSON C++ 数据格式
如何在 Visual Studio Code 中使用 Prettier 格式化代码
如何在 Visual Studio Code 中使用 Prettier 格式化代码
1172 0