vue--02 Prettier格式化

1. 创建格式化器文件

• 创建格式化器文件

cd vue-demo
# 由于.prettierrc不能写注释，推荐使用 .prettierrc.js
touch .prettierrc.js

• 文件内容

# .prettierrc.js内容

module.exports = {
	//使用tab缩进还是空格缩进，false表示空格缩进；
	useTabs: false,
	//tab是空格的情况下，是几个空格，选择4个；
	tabWidth: 4,
	//当行字符的长度，推荐80，也有人喜欢100或者120；
	printWidth: 80,
	//使用单引号还是双引号，选择true，使用单引号；
	singleQuote: true,
	//在多行输入的尾逗号是否添加，不需要添加设置为 `none`，需要添加设置为 all；
	trailingComma: 'none',
	//语句末尾是否要加分号，默认值true，选择false表示不加；
	semi: false,
	//表示.vue文件中，<script>和<style>标签中的代码缩进两个单元格
	vueIndentScriptAndStyle: true,
	// 对象文字中的括号之间打印空格
	bracketSpacing: true,
	// 属性多时自动换行
	proseWrap: 'preserve',
	// 在jsx中把'>' 是否单独放一行
	jsxSingleQuote: false,
	// 格式化的解析器，默认是babylon
	parser: 'babylon',
	// 不让prettier使用tslint的代码格式进行校验
	tslintIntegration: false
};

2. vscode配置

• Vscode安装插件Prettier - Code formatter
• 配置vscode使用.prettierrc.js

• 设置—搜索save—勾选Editor:Format On Save
• 项目文件右键选择使用...格式化文档—配置默认格式化器—Prettier - Code formatter（default）

• 解决eslint和prettier冲突

# .eslintrc.js rules里添加配置
"rules": {
    "indent":0,
    "space-before-function-paren":0
}

3. 参考文档

• 其他配置

https://www.cnblogs.com/yaopengfei/p/15568730.html

• editorconfig、eslint、prettier的区别

https://blog.csdn.net/nnuan/article/details/116012721