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

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

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

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

1.安装

bash 复制代码
pnpm install -D eslint-config-prettier

2.配置

javascript 复制代码
{
  "extends": [
    "已经配置的规则",
    "prettier",
  ]
}

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

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

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

1.安装

bash 复制代码
pnpm install -D eslint-plugin-prettier

2.配置

javascript 复制代码
{
  "extends": [
    "已经配置的规则",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error",
  }
}
相关推荐
IT_陈寒9 分钟前
SpringBoot高并发优化:这5个被忽视的配置让你的QPS提升300%
前端·人工智能·后端
光影少年16 分钟前
css优化都有哪些优化方案
前端·css·rust
BillKu25 分钟前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
bestadc28 分钟前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
yangzhi_emo37 分钟前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军43 分钟前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛1 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户458203153171 小时前
CSS无需JavaScript的交互效果实现
前端·css
影i1 小时前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端71 小时前
Alien-Signals 响应式系统
前端·vue.js