配置Prettier格式化

1、vscode 需要安装：Prettier - Code formatter

2、手动配置vscode软件的settings.json

{
	/*配置html css js的默认格式化程序*/
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  /*配置prettier*/
  "prettier.printWidth": 120, // 超过最大值换行
  "prettier.tabWidth": 4, // 指定一个制表符等于的空格数
  "prettier.useTabs": false, // 缩进使用tab，不使用空格
  "prettier.semi": false, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "always", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号；always:保留小括号
  "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
  "htmlWhitespaceSensitivity": "ignore", //
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验
  "prettier.singleAttributePerLine": true,//HTML元素有多个属性，每个属性格式化为单独一行
  
	/*配置编辑器 看个人习惯配置*/
	"editor.formatOnSave": true, // 每次保存的时候将代码按格式进行修复
	// 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

保存文件时会自动按照settings.json的规则进行格式化。
3、除了第2步这种方式，还可以给项目根目录创建一个.prettierrc配置文件，同时创建.prettierignore文件，由于prettier插件优先使用项目根目录下的.prettierrc配置文件对代码进行格式化，而忽略settings.json的配置。
3.1
.prettierrc配置如下

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "useTabs": false,
  "tabWidth": 4,
  "printWidth": 120,
  "proseWrap": "preserve",
  "arrowParens": "always",
  "bracketSpacing": true,
  "singleAttributePerLine": true
}

配置文件有多种，如：.prettierrc，.prettierrc.json，.prettierrc.js等等。选择一种即可，不同的配置文件写法不同，最终效果是一样的。
如果添加了配置文件那么编辑器中的所有Prettier设置就会被覆盖掉。

.prettierignore配置忽略如下

# 忽略dist目录下文件的语法检查
dist
# 忽略所有html文件
*.html

3.2、配置全部格式化
安装

npm install prettier -D

在package.json中添加"prettier": "prettier --write ."

然后运行npm run prettier进行全部格式