解决eslint和prettier冲突
大约 1 分钟
eslint 检测代码规范、pretter 修复代码格式,他们功能有一些重叠,配置不当情况下、比如 eslint 设置单引号、prettier 双引号,会导致编译执行错误,导致冲突,如何解决呢?
冲突本质原因是 eslint 和 prettier 并行导致,解决冲突的方法好几种:
- 关闭冲突规则
- 调整执行顺序
- 手动调整-统一配置
关闭冲突规则
使用 eslint-config-prettier 插件来禁用 ESLint 中与 Prettier 冲突的规则。
该插件会将 Prettier 的规则应用到 ESLint 中,并自动禁用冲突的规则。您可以在 ESLint 配置文件中添加以下配置:
- 安装 eslint-config-prettier:
npm install --save-dev eslint-config-prettier
- 将 eslint-config-prettier 添加到您的 ESLint 配置中 – eslintrc或eslint.config.js
{
"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」,加我进王天唯一的读者群。