关于项目中使用了Prettier和ESLint发生了冲突的问题解决方案

[jocstech]

我看作者您在.vscode/settings.json中关闭了自动保存和eslint修复，想必原因是因为保存的时候，eslint语法修正和prettier语法美化之间会发生冲突格式化，其实很简单的解决思路就是直接把项目中所有有关prettier的依赖和配置都删除掉，默认使用eslint的格式化也是很不错的方案。

可以参考前端大神antfu的专题文章：

《为什么我不使用 Prettier》 - https://antfu.me/posts/why-not-prettier-zh

[Allen-1998]

• antfu的文章我也看过，甚至本项目的eslint也是用了antfu的配置，至于 eslint 和 prettier 的冲突可以通过配置来解决 https://github.com/ttk-cli/uni-vue3-vite-ts-pinia/blob/75d593a338d6dc2cc1c262188453515051d22f30/.eslintrc#L2-L11

• 关于为什么要集成 prettier plugin 其实主要是因为eslint虽然支持限制每行最大内容宽度，但是却不支持自动修复，这样的话如果你的组件有很多属性例如

  <view class="xxx" aaa="aaa" bbb="bbb" ccc="ccc" ddd="ddd" eee="eee" fff="fff" />

  就只能选择左右滑动来看，或者手动去给它换行

  当然就像 prettier 宣称的 An opinionated code formatter ，它是一个自以为是的代码格式化程序，在项目中要不要使用它其实也是“自以为是的”，其实是否使用它并不重要，重要的是在你的团队中风格是统一的，即所有人都使用或所有人都不使用，这也是为什么要配置项目级的 .vscode settings file 而不是 vscode 的 global settings

• 关于当时为什么选择暂时关闭 source.fixAll.eslint ，实际上是遇到了一个 在.vue文件中写行内样式时与 stylelint 冲突的 case

  <view style="background-color: red;" />

  例如这里 stylelint 会默认加上 ;, 而 prettier会提示这里不能加上 ;，所以当时就顺手把 eslint 的自动修复给关掉了，当然其实这里启用自动修复也是有解决方案的，只要按下面这样写它们就可以相安无事

  <view :style="{ 'background-color': 'red' }" />

  虽然麻烦了一些，但是在css的规范中一般情况下实际上不建议写行内样式，同时有unocss的存在，绝大部分场景下也不需要写style了，所以这个也不算什么问题吧

综上，项目中的 source.fixAll.eslint 是可以打开的，只需要注意上面的这个特殊case中和stylelint冲突的问题即可，至于prettier，它的优缺点社区中讨论的已经很多了，是否使用更多的取决你个人或者你团队中绝大部分人的喜好