解决eslint与prettier在代码格式上的冲突

eslint与prettier在代码格式上的冲突

因为eslint本身也具备对代码格式的控制与检查能力，所以不可避免可能会与prettier的代码格式冲突，比如eslint配置rules中对缩进的要求为2并在不满足时报错。

解决方案很简单——思路就是把prettier的规则复写进eslint中，并对原本eslint中的格式配置进行覆盖，这样就做到了eslint的格式化检查与prettier的格式化行为统一。

1.安装

pnpm install -D eslint-config-prettier

2.配置

{
  "extends": [
    "已经配置的规则",
    "prettier",
  ]
}

extends的值为数组，后面的数组项会继承和覆盖前面的配置，所以完成了prettier规则对eslint规则的扩充和覆盖。

最佳实践——省略prettier格式化命令，eslint进行格式化与检查一步到位

完成上述操作本质是做到了 ESLint 会按照 Prettier 的规则做相关校验，也就是说先执行Prettier格式化后再执行eslint检查不会因为格式问题冲突而报错，但是还是需要运行 Prettier 命令来进行格式化。为了避免多此一举，社区也提供了整合上面两步的方案：在使用 eslint --fix（eslint错误修复） 时候，实际使用 Prettier 来替代 ESLint 的格式化功能。操作如下：

1.安装

pnpm install -D eslint-plugin-prettier

2.配置

{
  "extends": [
    "已经配置的规则",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
  }
}