头图

prettier 把我代码弄的很丑

混子的日常
English

开篇一个小故事:

近日组内多人反馈 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-prettiereslint-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, 我立马走

阅读 649

混子的日常
重学前端

自信、自洽、自在

4.5k 声望
2.3k 粉丝
0 条评论
你知道吗?

自信、自洽、自在

4.5k 声望
2.3k 粉丝
文章目录
宣传栏