前言
在前端开发领域，代码规范是非常重要的一环。它可以优化代码质量，提高协作效率，降低维护成本。而 Prettier 是一个非常流行的代码格式化工具，能够自动格式化代码，让代码风格更加统一且易于阅读。以下是 Prettier 的几个好处：
- 统一代码风格
在团队合作中，不同的开发人员可能有不同的代码风格和习惯。这会导致代码的可读性、可维护性和可扩展性降低，并且增加阅读他人代码的难度。而 Prettier 可以通过强制执行代码规则和格式，使代码风格更加统一，从而减少因为代码格式差异引起的冲突和问题。
- 简化代码 Review 过程
代码 Review 是团队中非常重要的一项工作，需要花费大量的时间和精力。而 Prettier 可以帮助开发者自动进行代码格式化，减少因为格式不一致引起的 Review 时间，让更多精力放在代码逻辑和架构上。
- 提高代码质量
代码的可读性对于一个项目的成功至关重要。Prettier 可以使代码格式更加整洁，让代码易于阅读。这不仅可以提高代码的可读性，还可以降低因为代码可读性差导致的 Bug，从而提高代码质量。
- 提升开发效率
Prettier 可以自动化执行代码格式化工作，提高代码编写的效率。开发者可以专注于编写代码，而无需花费大量时间去手动调整代码格式，让开发者更快地完成工作，并提高开发效率,能够帮助开发者实现代码规范化、节省时间，提升代码质量和可读性等方面的优化。
规则
.prettierrc.js
module.exports = {
// 控制着是否在函数名和括号之间加上空格
'spaceBeforeFunctionParen': false,
// 是否关闭三元表达式的校验
'noConditionalOperator': true,
// 当箭头函数的参数只有一个时，参数使用小括号包裹
'arrowParens': 'always',
// 打印对象字面量中括号之间的空格。
'bracketSpacing': false,
// 是否将具有多行元素的>放在最后一行的末尾，还是单独放在下一行
'bracketSameLine': false,
// 是否将JSX中具有多行元素的>放在最后一行的末尾，还是是单独放在下一行
'jsxBracketSameLine': false,
// 行结束符
'endOfLine': 'auto',
// 是否打印分号
'semi': false,
// html中对于空格的处理方式
'htmlWhitespaceSensitivity': 'strict',
// 是否在文件顶部插入@format标记
'insertPragma': false,
// 指定超过该最大长度时，prettier换行。
// 'printWidth': 90,
// 属性换行方式
'proseWrap': 'always',
// 对象中的属性名如何添加引号
'quoteProps': 'preserve',
// 是否在文件开头有@prettier或者@format才格式化该文件
'requirePragma': false,
// 是否使用单引号替代双引号
'singleQuote': true,
// jsx中是否使用单引号替代双引号
'jsxSingleQuote': false,
// 指定Tab的空格数
'tabWidth': 2,
// 多属性换行
'singleAttributePerLine': true,
// 是否使用tab进行缩进，而不是使用空格
// 'useTabs': false,
// 打印结尾分号
'trailingComma': 'all',
// import 导入顺序
'importOrder': [
'^(^react$|^@react|^react|^recoil|redux|vite)',
'^(^antd|^rsuite|^@emotion|^emotion|theme-ui|^semantic-ui|^@rebass|^@chakra-ui|bootstrap|tailwind|bulma|mui|^@blueprintjs|reactstrap|^@mantine)',
'<THIRD_PARTY_MODULES>',
'^@(.*)$',
'^~(.*)$',
'^[./]',
],
// 是否将命名空间导入说明符放到导入分组的最前面
'importOrderGroupNamespaceSpecifiers': true,
// 对导入的包不同分类中间是否添加空格
'importOrderSeparation': true,
// 对导入的同一个包中的说明符是否排序
'importOrderSortSpecifiers': true,
}
