prettier 把我代码弄的很丑

开篇一个小故事：

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

又暴露了我的无知：

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

本质： 我不懂 eslint， 也不懂 prettier，更甚我tmd还不懂 html 了，我也不懂英语

空格敏感

第二个图片的代码为啥那样了? 我们首先回顾下 html 空格问题

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

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 文件，不缩进 <script> 和 <style> 里的内容
  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 的扩展和插件有啥区别? 欢迎留言讨论

我很菜，很焦虑，但我还没有放弃；给个 Offer， 我立马走