前端开发规范03-ESLint 与 Prettier 配合解决代码格式问题

参考：https://baijiahao.baidu.com/s?id=1704599223959464441&wfr=spider&for=pc

1. 在 VSCode 中安装 prettier 插件（搜索 prettier），这个插件可以帮助我们在配置 prettier 的时候获得提示
   
2. 在项目中新建 .prettierrc 文件，该文件为 perttier 默认配置文件
3. 在该文件中写入如下配置：

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

4. 打开 VSCode 《设置面板》
5. 在设置中，搜索 save ，勾选 Format On Save
   
   至此，你即可在 VSCode 保存时，自动格式化代码！
   但是！ 你只做到这样还不够！
   1. 对VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格
   2. 如果大家的 VSCode 安装了多个代码格式化工具的话
   3. ESLint 和 prettier 之间的冲突问题

尝试在 HomeView.vue 中写入一个 created 方法，写入完成之后，打开我们的控制台我们会发现，此时代码抛出了一个 ESLint 的错误。

这个错误的意思是说：created 这个方法名和后面的小括号之间，应该有一个空格！
但是当我们加入了这个空格之后，只要一保存代码，就会发现 prettier 会自动帮助我们去除掉这个空格。
那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。

针对于这个问题我们想要解决也非常简单：

1. 打开 .eslintrc.js 配置文件
2. 在 rules 规则下，新增一条规则

'space-before-function-paren':'off',

3. 该规则表示关闭《方法名后增加空格》的规则
4. 修改.eslintrc.js后，重启项目配置才会生效

至此我们整个的 perttier 和 ESLint 的配合使用就算是全部完成了。
在之后我们写代码的过程中，只需要保存代码，那么 perttier 就会帮助我们自动格式化代码，使其符合 ESLint 的校验规则。而无需我们手动进行更改了。