一、Prettier简介
Prettier是一个流行的代码格式化工具，它的主要作用是帮助开发者自动规范化代码的格式，提高代码的可读性和一致性。Prettier通过解析代码并使用自己的规则重新打印它，以确保代码风格的一致性和符合预设的格式化标准。
二、prettier主要特点
2.1、自动化格式化：Prettier能够自动识别代码中的缩进、换行、空格等格式，并根据预设的规则进行格式化，无需手动调整代码格式。
2.2、支持多种语言：Prettier支持多种编程语言，包括JavaScript、TypeScript、CSS、HTML等，可以满足不同项目的需求。
2.3、配置灵活：Prettier提供了丰富的配置选项，可以根据项目需求进行个性化配置，包括缩进大小、换行符类型、引号风格等。
2.4、快速高效：Prettier采用了先进的解析器和格式化算法，能够快速处理大型代码库，并保持良好的性能。
三、prettier主要功能
3.1、代码风格统一：Prettier可以确保团队成员在不同的编辑器中编写的代码具有相同的格式，避免因个人编码风格差异导致的代码混乱。
3.2、提高代码可读性：通过一致的代码风格，Prettier可以帮助提高代码的可读性，使得代码更加易于理解和维护。
3.3、减少代码审查工作量：在团队开发中，Prettier可以作为代码规范的一部分，减少代码审查时因格式问题而产生的工作量。
3.4、集成多数编辑器：Prettier可以集成到大多数编辑器和开发环境中，如Visual Studio Code、Atom、Sublime Text等，方便开发者使用。
四、prettier使用场景
Prettier适用于各种开发场景，包括个人项目、团队协作和开源项目等。在个人项目中，开发者可以使用Prettier来保持代码的一致性和可读性；在团队开发中，Prettier可以作为代码规范的一部分，确保团队成员编写的代码风格一致；在开源项目中，Prettier可以帮助维护者和贡献者保持代码的一致性，提高项目的可维护性。
五、prettier配置方式
5.1、安装 Prettier / v3.3.3
pnpm add prettier5.2、配置 Prettier
Prettier 支持多种配置方式.prettierrc.json（或 .prettierrc.json、.prettierrc.yaml、.prettierrc.js）
创建 .prettierrc.json 文件，并添加以下基础配置
{ "semi": false, "singleQuote": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, "trailingComma": "none", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid", "endOfLine": "auto"
}这个配置定义了一些基本的格式化选项，如是否使用分号、单引号、行宽等。
5.3、package.json / script集成
提交代码之前运行 Prettier 来格式化所有更改的文件
{ "scripts": { "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,scss,json,md}\"" }
}终端中运行 pnpm run format 来格式化项目中的所有指定文件。
六、husky / pre-commit（方法一）
pnpm run format七、集成到 Git 钩子（方法二）
为了更进一步自动化这个过程，你可以使用像 husky 和 lint-staged 这样的工具来将 Prettier 集成到 Git 钩子中。这样，每次提交之前都会自动运行 Prettier 来格式化暂存的文件。
安装 husky 和 lint-staged
pnpm add husky lint-staged执行后会检查文件并自动修正
然后，在 package.json 中配置它们：
{ "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx,vue}": [ "eslint --fix"], "*.{js,jsx,ts,tsx,css,scss,json,md,yaml,yml}": [ "prettier --write"] }
}在.husky/pre-commit文件增加
npx lint-staged
执行后，测试成功
八、过程记录
记录一、
在 Husky 目录下，出现的 _ 目录是一个特殊目录，它主要用于存储 Husky 的内部脚本和配置。这个目录通常不是由用户直接创建的，而是在 Husky 初始化或安装过程中自动生成的。
九、欢迎交流指正
十、参考链接
Vue：Vue3-TypeScipte-Pinia-Vite-pnpm / 基础项目 / 20240807-CSDN博客