使用prettier随心所欲写代码

[linqinghao]

问题

2. 常常在开发的时候，因为自己写的代码有时候不符合项目的代码规范，不符合的代码都会有标红的下划线，然后一直有强迫症需要去改正代码，这可能就会打断自己写代码的思路。看着满屏的红色代码，心情也会很糟糕。
3. 团队项目在协同开发的时候，每个人写的代码格式不一样，有时候会导致代码难以理解，阅读困难等。

所以我就在思考有没有一个比较好的工具既能让自己随心所欲的写代码，不需要关心代码规范是怎么样的，提交到远程仓库时候会自动格式化代码。后来就发现了一个非常好的工具可以帮助我们做这些事情。也就是我们今天介绍的prettier

prettier

官网介绍prettier是一个可配置的代码格式化工具，支持多种语言，包括javascript，jsx，typescript，json等等。它能够保证输出的代码是一致的。官方例子：

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

上面代码由于太长，阅读起来十分困难。prettier就能帮我们美化下这份代码。

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

这样子代码阅读起来就非常流畅了。

prettier能帮助我们做什么

1. 它能帮助我们停止无用并且浪费时间的代码风格争论，譬如，缩进的宽度等等。
2. 手动格式化代码是件非常辛苦的活，prettier就能够帮助我们输出一致的代码，是不是觉得很cool～
3. 设置githook可以减少PR中由于ESLint规则导致构建失败的样式问题
4. 不需要关心繁琐的代码规范，专注开发工作

使用prettier

个人日常开发

以自己日常开发举个例子，我只需要简单配置一下自己想要输出的代码格式，就能随心所欲写代码，格式化的工作交给prettier去做，只要保存一下文件，它就能自动地帮我们纠正自己的代码风格。

以常用的开发工具vscode举个例子，先要在应用商店安装prettier扩展

安装完成后，你就可以格式化文件了，但是prettier使用的是默认的代码风格，我们可以更改为自己喜欢的代码风格。

我们可以通过在自己项目创建配置文件(.prettierrc)的方式，但是在自己的个人项目会显得冗余，所以可以简单的在vscode的用户配置里加上下面这些:

"editor.formatOnSave": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.singleQuote": true

上面的代码表示保存后自动格式代码，每行最多100个字符，去除分号，使用单引号。更多配置可以参考官方地址这里。这样子就大功告成啦，来看下效果～

团队项目开发

在团队项目开发中，我们会将prettier工具集成到项目里面去，在提交代码的时候利用githook格式化代码，保证提交到远程仓库的代码是一致性的代码风格。

1. 在项目根目录下创建配置文件.prettierrc.yml，这里我使用的是yml语法，也可以使用json，js等文件格式。

   # .prettierrc
   tabWidth: 2
   useTabs: false
   semi: true
   singleQuote: true
   trailingComma: "es5"
   bracketSpacing: true
   jsxBracketSameLine: false
   arrowParens: "avoid"

   具体的配置信息可以参考官方文档。

2. prettier支持多种pre-commit hook，这里介绍git commit时候的钩子。安装下方依赖：

   yarn add pretty-quick husky --dev

   并且在项目的package.json文件中增加scripts：

   {
     "scripts": {
       "precommit": "pretty-quick --staged"
     }
   }

做完上述两个步骤就能够愉快的开始开发啦～当你提交代码到git仓库的时候，prettier就会自动帮你格式化哟～好了，功力未深，还望指正～