拥抱 prettier - 《前端框架使用记录》

prettier 是什么？
为什么使用？
使用方式

prettier 是什么？

prettier 是一个漂亮代码格式工具。prettier 通过将JavaScript解析为AST来去除原来的代码样式，并且将其按照一致的格式的方式输出。只要代码的内容是一样的，那么输出的代码就将会是一致的。
prettier现在支持 JavaScript，TypeScript，CSS， Less， SCSS， Vue， JSON， GraphQL and Markdown。基本覆盖了前端所有需要使用的文件。

为什么使用？

代码风格一项是团队合作中比较麻烦的地方，不同的人有不同的使用方式。虽然有 eslint 之类的框架用来干这件事，但是 eslint 有很多很复杂的配置。而且 eslint 的 fix 很弱智，我们必须在写代码的时候就规定好格式，手工来进行格式的校正和 fix。
举个例子：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

这种长代码并不好读，eslint 虽然可以配置max-len，但是不知道如何解决他。为了美观和易读我们可能需要手工调整一下。下面这样就会易读很多。

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

这在 prettier 中会自动完成，即使你喜欢手工调整，eslit 也不能避免很多情况。下面这种情况 lint 并不会报错，eslint 的 fix 经常会制造这样的问题出来，看起来是错的但是它并不能识别。往往需要手动调整。这种工作是对耐心和眼睛的考验。

  foo({ num: 3 },
      1, 2);
    foo(
      { num: 3 },
      1, 2);
    foo(
      { num: 3 },
      1,
      2
    );

eslint 存在多种正确答案，这对团队合作来说是很不利的。
很多人喜欢这么写：

myPromise
  .then(() => {
    // ...
  })
  .then(() => {
    // ...
  })
  .catch(() => {
    // ..
  });

但是也有人这样写：

myPromise.then(() => {
  // ...
}).then(() => {
  // ...
}).catch(() => {
  // ..
});

在 eslint 中这都是 ok 的。这样的例子有很多。团队合作中这种代码会造成很多摩擦。调整起来也很奔溃，lint 有很多复杂的规则，如果期望团队中所有的人都能了解 eslint 规则，并且熟练的使用并不是很容易的事。
而 prettier 正适合用于这样的环境，只要是AST一样的代码出来的格式就是一样的。只要在 commit 之前格式化一下。所有的代码样式都会统一。不用担心删除一个空格提交，多余一个空格需要提交，甚至引起冲突。提交的代码都是具体业务改变，不是格式修改这种费眼睛的。
对于很多人来说代码格式是很头疼的事情。不同的团队有不同的风格。如果使用 prettier，你可以随心所欲的写代码，无论代码多么脏，你不喜欢写分号，喜欢用双引号或者不喜欢换行，这种不是问题，只要你写完之后prettier一下，代码就回变成统一的格式。无需关注细节，尽情的放纵自己写肮脏的代码，prettier会帮助你解决代码风格问题。并且和同事的一模一样。
即使是这种放飞的代码，也可以变得漂亮。

// 格式前
function foo () {
  var x =   5
  var y = 6
  var z = 7; return x + y + z
  }
// 格式化后
function foo() {
  var x = 5;
  var y = 6;
  var z = 7;
  return x + y + z;
}

重要的是完全没有学习成本，只要像原来一样写的就好了，写完 prettier 一下就好了。

使用方式

命令行使用

将 prettier 安装到自己的项目

yarn add prettier --dev --exact

格式化一个代码文件

yarn prettier --write src/index.js

vscode 使用

如果是 vscode 可以安装 prettier 插件来完成这个工作，可以直接取代原来的格式化工具。
使用起来体验更佳。

所有主流的编辑器都已经支持了 prettier。具体可以查看官网的说明 https://prettier.io/

与 eslint 配合

prettier 在一些规则上和 eslint 冲突，可以使用eslint-config-prettier 关闭冲突的所有的规则。