跳至主要內容

解决eslint和prettier冲突

程序员王天大约 1 分钟

eslint 检测代码规范、pretter 修复代码格式,他们功能有一些重叠,配置不当情况下、比如 eslint 设置单引号、prettier 双引号,会导致编译执行错误,导致冲突,如何解决呢?

冲突本质原因是 eslint 和 prettier 并行导致,解决冲突的方法好几种:

  1. 关闭冲突规则
  2. 调整执行顺序
  3. 手动调整-统一配置

关闭冲突规则

使用 eslint-config-prettier 插件来禁用 ESLint 中与 Prettier 冲突的规则。
该插件会将 Prettier 的规则应用到 ESLint 中,并自动禁用冲突的规则。您可以在 ESLint 配置文件中添加以下配置:

  1. 安装 eslint-config-prettier:
npm install --save-dev eslint-config-prettier
  1. 将 eslint-config-prettier 添加到您的 ESLint 配置中 – eslintrcopen in new windoweslint.config.jsopen in new window
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  // 其他配置项
}

这样 ESLint 将使用 Prettier 的规则,并且禁用与其冲突的规则。

调整执行顺序

可以使用 eslint-plugin-prettier 插件将 Prettier 集成到 ESLint 中。该插件将在检查代码的同时自动应用 Prettier 的格式化规则,确保代码风格一致。
1、安装 eslint-plugin-prettier

npm i eslint-plugin-prettier

2、将 prettier 放在最后,因为后面的配置项会覆盖前面的;

{
  "plugins": ["prettier"],

}

3、修改 rules,将 prettier 的规则配置写入 eslint,这样 eslint 会一同校验 prettier 规则


{
  "plugins": ["prettier"],
  "rules": {
      "prettier/prettier": "error",
      // 其他规则
    }

}

手动调整-统一配置

用手撸吧!将 prettier 和 eslint 配置设置一致即可

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com