prettier|prettier 把我代码弄的很丑 prettier把我代码弄的很丑

【prettier|prettier 把我代码弄的很丑】开篇一个小故事：
近日组内多人反馈 eslint fix 后的代码很丑。我说我看看，然而 2 个月过去了，我都没有搞定。。。（老透明，想刷存在感。）

文章图片

文章图片

又暴露了我的无知：

是 eslint 修的，还是 prettier 修的
这是什么奇怪的风格

本质：我不懂 eslint，也不懂 prettier，更甚我tmd还不懂 html 了，我也不懂英语
空格敏感第二个图片的代码为啥那样了? 我们首先回顾下 html 空格问题

这是一行非常、非常长的文字~，我就问你。你敢轻易换行吗

html标签很容易出现莫名空格问题。如何解决？

优雅一点父元素font-size: 0，子元素font-size: 12.345px
老司机文字顶头写，尾标签也紧紧的跟随。

知道了空格问题，我大概懂了。prettier 应该是不想背空格的锅，所以把代码搞成那样。
感兴趣的同志，可以看看
eslint-plugin-prettier修复后换行的格式很乱
prettier 介绍一个挺那个的（opinionated）代码格式化的工具。提供很少的配置，辅助我们做代码格式化。
试着下执行 npx prettier --write .
prettier 配置 .prettierrc.js

module.exports = { // 单行代码字符数限制 printWidth: 80, // tab键缩进相当于2个空格 tabWidth: 2, // 行缩进使用空格 useTabs: false, // 语句的末尾不加分号 semi: false, // 使用单引号 singleQuote: true, //仅仅当必须的时候才会加上双引号 quoteProps: 'as-needed', // 在 JSX 中使用单引号 jsxSingleQuote: true, // 尾逗号 trailingComma: 'all', //在括号和对象的文字之间加上一个空格 bracketSpacing: true, // 当箭头函数中只有一个参数的时候忽略括弧 arrowParens: 'avoid', // vue template 中的结束标签结尾尖括号掉到了下一行 htmlWhitespaceSensitivity: 'ignore', // .vue 文件，不缩进和里的内容 vueIndentScriptAndStyle: false, };

htmlWhitespaceSensitivity: 'ignore'这个配置就是我遇到问题的解决方案。
prettier 和 eslint 现在常规的配置方案：prettier 负责修代码格式，eslint 负责代码潜在质量问题。
官网说 prettier 是 opinionated 的。因此它想处理的工作，别人就不能插手了，我们必须将 eslint 的格式规则禁用掉。不禁用？那就死循环。
插一个问题：如何执行 prettier 和 eslint 大家都知道吧？我不太清楚，会查文档就可。
基于上述原因在项目里面我们还要按两个依赖：eslint-config-prettier、eslint-plugin-prettier
eslint-config-prettier: 负责关掉 eslint 所有格式相关的规则
eslint-plugin-prettier：将 prettier 整合进 eslint，作为 eslint 一条规则来运行prettier。
看到这儿，eslint(prettier/prettier)啥意思知道了吧
.eslintrc.json

{ "extends": [ .... // eslint-config-prettier "prettier" ] //eslint-plugin-prettier "plugins": ["prettier"], "rules": { "prettier/prettier": "error", .... } }

以上 prettier 的基础我就算掌握了
小Q eslint 的扩展和插件有啥区别? 欢迎留言讨论