Ant-design-pro: Introduce prettier

[yesmeck]

碰到很多开发写的项目都是一堆 lint 错误。发现他们很多人其实不知道是怎么改的。然后 eslint 就成了摆设。可以同时引入 prettier 和 eslint，prettier 用于代码的格式化，eslint 主要对一些最佳实践做 lint.

[afc163]

https://github.com/prettier/prettier-eslint

[chenshuai2144]

@afc163
prettier 一直在用.还可以和ide做集成.
贡献代码一直怕弄乱格式.只能一个个的空格回车添加.
markdown也会更加漂亮

期待 快速加入

[nikogu]

一般大家都用 ide 吧，给 pro-cli 加了下：
https://github.com/ant-design/ant-design-pro-cli#prettier-eslint-your-code

[yesmeck]

是不是加到 pre-commit 里？https://prettier.io/docs/en/precommit.html

[chenshuai2144]

Pre commit 直接调用prettier格式化一下吧！ 我就是这么干的！我的实习生从来不格式化代码。这样反而使用起来容易。

[nikogu]

https://github.com/ant-design/ant-design-pro/commit/117ac96ba3acdf42538001c5d4da1ff739d52cae

顺便 prettier 了一下 package.json

[chenshuai2144]

已经提交了吗？md也应该prettier
.

[chenshuai2144]

Missing trailing comma

locale: {
      emptyText: '暂无数据',    
      clear: '清空'   
    }

locale: {
      emptyText: '暂无数据',   
      clear: '清空',   
    },

Expected parentheses around arrow function argument having a body with curly braces

我觉得这两条规则不是很好看!

[chenshuai2144]

prettier 引入失败了! 和eslint不兼容...
冲突的规则

• comma-dangle
• react/jsx-closing-bracket-location
• react/jsx-closing-tag-location
• react/jsx-curly-spacing
• react/jsx-equals-spacing
• react/jsx-first-prop-new-line
• react/jsx-indent
• react/jsx-indent-props
• react/jsx-max-props-per-line
• react/jsx-tag-spacing
• react/jsx-wrap-multilines

[yesmeck]

其实 prettier 的重点不是在跟 eslint 一样统一风格，而是在使用 prettier 后你就不需要去关注代码风格了。比如 arrow-parens 这条规则，根据 airbnb 的配置，如果有 block body 就需要给参数加括号，反之就不需要。这样导致你写代码的时候需要记这条规则了，有时候把一个没有 block body 的方法改成有 block body 时，你忘了给参数加上括号，eslint 报错后还要再回去改。但是如果把这种风格问题让 prettier 来处理的话，你就完全不需要关注这些了。

[chenshuai2144]

@yesmeck +1

eslint 的 code-quality rules 还是很有用的,
但是 formatting rules用起来很难受.有时候写的代码比较脏 他根本无法fix ,需要手工更改.而且规则特别繁多.
arrow-parens这个规则有很多种情况.学习成本和记忆成本都挺高的.而且很多时候无法fix.
prettier 就能解决这些问题.他和你现在的代码格式是没有关系的.无论你写的如何,只要内容一样.输出都是一样的.可以将更多的精力放在业务上.对于很多刚入门的人来说也是很好的解决方案. 刚开始学习那么多规则,本身就是很抵触的.