prettier 把我代码弄的很丑

开篇一个小故事：

近日组内多人反馈 eslint fix 后的代码很丑。我说我看看，然而 2 个月过去了，我都没有搞定。。。（老透明，想刷存在感。）

又暴露了我的无知：

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

本质： 我不懂 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 文件，不缩进