代码格式化

有了eslint，为什么还要有prettier？

• eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次。
• 而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。
• 总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。

安装

# 安装prettier
pnpm install -D prettier
# 解决prettier和eslint的冲突
pnpm install -D eslint-plugin-prettier  eslint-config-prettier

配置规则

• 在根目录下新建.prettierrc.js，然后在.prettier.js中加入规则
• 官方配置

export default {
	// 每行最大字符数，超过会自动换行
	printWidth: 100,

	// 缩进空格数
	tabWidth: 4,

	// 使用tab来缩进，默认是false
	useTabs: true,

	// 语句末尾是否加分号
	semi: true,

	// 使用单引号代替双引号
	singleQuote: true,

	// 对象属性是否加引号（as-needed|consistent|preserve）
	quoteProps: 'as-needed',

	// 对象字面量的括号之间是否加空格
	bracketSpacing: true,

	// 箭头函数参数是否加括号（always|avoid）
	arrowParens: 'always',

	// 范围格式化的模式（auto|off）
	rangeStart: 0,
	rangeEnd: Infinity,

	// 是否格式化嵌入的代码（如 HTML 中的 JavaScript）
	embeddedLanguageFormatting: 'auto',

	// Vue 单文件组件中 script 和 style 标签内的缩进
	vueIndentScriptAndStyle: false,

	// 换行符格式（lf|crlf|cr|auto）
	endOfLine: 'lf',

	// 是否格式化 markdown 中的代码块
	singleAttributePerLine: true,
};

配置脚本

• 在package.json中加入脚本

"scripts": {
	"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
},

配置忽略

• 项目根目录创建.prettierignore 并加入规则

/dist/*
/html/
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*