一文解决eslint prettier 格式化冲突的问题

项目背景

首先我用的是VSCODE编辑器
安装了 prettier 插件
用vue-cli脚手架创建的项目

想要解决格式化代码的冲突问题，就需要知道规则的配置文件都在哪儿

1. VSCODE setting.json里面可以配置prettier的规则
2. 项目根目录可以配置prettier规则

项目根目录的prettier配置文件有两种，
一种是prettier configuration files，一种是.editorconfig
.editorconfig比prettier configuration files的优先级更高
项目根目录的规则比VSCODE setting.json里配置的规则优先级更高

// prettier规则优先级
`.editorconfig` > `prettier configuration files` > `setting.json`

3. 项目根目录eslint配置文件可以配置规则
   （项目根目录的 .eslintrc.js 文件）
   三个地方的规则统一了，格式化才不会报warning

另外如果你安装了Vetur，Vetur好像也带格式化，如果以上三项规则统一了还是出错，可以看下是否是Vetur在捣鬼

原理:
prettier的规则是负责格式化代码的，
eslint的规则是负责检查文件是否符合规则的，
我没有开启eslint的autoFix，
格式化的工作全部交给了prettier，
eslint只负责检查，
这么配置感觉挺好用的。

prettier插件关于配置文件的说明

//prettier.config.js
module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  singleQuote: true,
  semi: true,
  trailingComma: 'all',
  bracketSpacing: true,
  arrowParens: 'always',
};

//.editorconfig
[*]                                 # 匹配所有的文件
indent_style = space                # 空格缩进
indent_size = 2                     # 缩进空格为2个
end_of_line = lf                    # 文件换行符是 linux 的 `\n`
charset = utf-8                     # 文件编码是 utf-8
trim_trailing_whitespace = true     # 不保留行末的空格
insert_final_newline = true         # 文件末尾添加一个空行
curly_bracket_next_line = false     # 大括号不另起一行
spaces_around_operators = true      # 运算符两遍都有空格
indent_brace_style = 1tbs           # 条件语句格式是 1tbs

[*.{js,vue,ts}]                              # 对所有的 js 文件生效
quote_type = single                 # 字符串使用单引号

[*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
quote_type = double                 # 字符串使用双引号

[package.json]                      # 对 package.json 生效
indent_size = 2                     # 使用2个空格缩进