Prettier

#工程化

配置

.prettierrc.js 格式化文件配置

module.exports = {
	// 当箭头函数的参数只有一个时，参数使用小括号包裹
	'arrowParens': 'always',
	// 打印对象字面量中括号之间的空格。
	'bracketSpacing': true,
	// 是否将具有多行元素的>放在最后一行的末尾，还是单独放在下一行
	'bracketSameLine': false,
	// 是否将JSX中具有多行元素的>放在最后一行的末尾，还是是单独放在下一行
	'jsxBracketSameLine': false,
	// 行结束符
	'endOfLine': 'auto',
	// 是否打印分号
	'semi': false,
	// html中对于空格的处理方式
	'htmlWhitespaceSensitivity': 'css',
	// 是否在文件顶部插入@format标记
	'insertPragma': false,
	// 指定超过该最大长度时，prettier换行。
	'printWidth': 80,
	// 属性换行方式
	'proseWrap': 'preserve',
	// 对象中的属性名如何添加引号
	'quoteProps': 'preserve',
	// 是否在文件开头有@prettier或者@format才格式化该文件
	'requirePragma': false,
	// 是否使用单引号替代双引号
	'singleQuote': true,
	// jsx中哦哦那个是否使用单引号替代双引号
	'jsxSingleQuote': false,
	// 指定Tab的空格数
	'tabWidth': 2,
	// 多属性换行
	'singleAttributePerLine': true,
	// 是否使用tab进行缩进，而不是使用空格
	'useTabs': true,
	// 打印结尾分号
	'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,
}

.prettierignore 不进行格式化的文件

# Ignore all files:
*.html
*.ejs
*.mdx
*.md
/dist/*
.local
/node_modules/**

**/*.svg
**/*.sh
/public/*