2019独角兽企业重金招聘Python工程师标准>>> 
为什么使用
很遗憾，JavaScript没有官方的代码风格。业界有一些流行的代码风格，比如Airbnb和Standard。使用它们的话，团队成员之间的代码会更易读。你也可以使用ESLint 来统一风格。但是它并不能保证代码100%一致。比如，ESLint的Airbnb配置，代码风格一项是团队合作中比较麻烦的地方，不同的人有不同的使用方式。虽然有 eslint 之类的框架用来干这件事，但是 eslint 有很多很复杂的配置。而且 eslint 的 fix 很弱智，我们必须在写代码的时候就规定好格式，手工来进行格式的校正和 fix。团队合作中这种代码会造成很多摩擦。调整起来也很崩溃，lint 有很多复杂的规则，如果期望团队中所有的人都能了解 eslint 规则，并且熟练的使用并不是很容易的事。
Prettier和ESlint
Prettier 是一个支持多种文件格式（包括javascript、css、less、sass、typescript、markdown等）的样式格式化工具。它会删除代码里的原始样式，并确保输出的代码风格一致。有一点需要注意，Prettier仅仅是对代码风格进行处理，并不会做Uglifyjs或者tree-shaking等代码优化
https://prettier.io/
输入代码是这样的：
| if (food === 'pizza') { alert('Pizza ;-)'); } else { alert('Not pizza ;-('); }
function foo(items) { return items .filter(item => item.checked) .map(item => item.value) ; }
const food = [ 'pizza', 'burger', 'pasta', ] |
Prettier处理之后的代码是这样的：
| if (food === "pizza") { alert("Pizza ;-)"); } else { alert("Not pizza ;-("); } function foo(items) { return items.filter(item => item.checked).map(item => item.value); } const food = ["pizza", "burger", "pasta"]; |
怎么整合到项目
在系统用户根目录下放置了Prettier的全局配置文件（prettier也可以优先使用项目本地的配置）
方法一 编辑器安装一个prettier插件
prettier已经支持了市面上绝大多数常见的编辑器，例如Atom、VS Code、WebStorm、Vim、Emacs等，官网也提供了一个 详细的页面 ，针对每个编辑器如何安装插件做了说明。
这里以vscode为例：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Using Command Palette (CMD/CTRL + Shift + P)
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
这样prettier就会接管vscode alt+shift+f 格式化代码，
优点：方便，快捷，无需过多配置
缺点：项目中开发者必须安装插件并且settings.json自定义设置一致，不好统一管理。
方法二 与 eslint 配合
prettier 在一些规则上和 eslint 冲突，可以使用eslint-config-prettier 关闭冲突的所有的规则。
方法三 在git提交代码时统一格式化
git提交自动格式化：pre-commit Hook
Prettier还可以很好的集成的到项目中，利用git的hooks机制，在提交commit时自动调用Pretter。这样子可以避免无法安装编辑器插件、安装了但是未提交代码前利用其格式化代码等各种情况的发生。具体操作时，还需要 Huksy、lint-staged这两个工具。
| Husky ：可以方便的让你通过npm scripts来调用各种git hooks。 lint-staged ：利用git的staged特性，可以提取出本次提交的变动文件，让prettier只处理这些文件。 |
第一步，配置npm scripts任务：
在项目的package.json中，配置pre-commit的hook任务：
注：precommit这个值不能改变，这是husky默认的对应的pre-commit-hook的任务名
| "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev-build": "webpack --config webpack.dev.config.js", "start": "webpack-dev-server --config webpack.dev.config.js --color --progress --hot", "build": "webpack --config webpack.config.js --color --progress", "mock": "json-server mock/mock.js --watch --port 8090", "dev": "npm run mock & npm start", "prettier": "prettier --write ./src/**/**/**/*", "lint:style": "stylelint \"src/**/*.less\" --syntax less", "lint": "eslint --ext .js src mock tests && npm run lint:style", "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js", "precommit": "npm run lint-staged" },
|
第二步，配置lint-staged
在配置文件中写如下命令，用来告诉lint-staged要处理的文件类型，以及调用的命令。
| "lint-staged": { "**/*.{js,jsx}": [ "eslint --fix", "git add" ], "**/*.{js}": "lint-staged:js", "**/*.less": [ "stylelint --syntax less", "prettier --write", "git add" ], "**/*.css": [ "stylelint ", "prettier --write", "git add" ] } |
只要在 commit 之前格式化一下。所有的代码样式都会统一。不用担心删除一个空格提交，多余一个空格需要提交，甚至引起冲突。只要业务改变了代码才会不同，杜绝格式修改这种费眼睛的提交。至此，你的项目就可以支持自动Prettier了。即使团队中有人没有安装prettier，也可以确保他的代码在提交到项目仓库中时，总是被Prettier了之后。
结论
- 几乎不需要做决定，因为 Prettier的配置选项很少。
- 团队成员不需要为规则去争论。
- 开源代码开发者不需要去学习项目的代码风格。
- 不需要去修复ESLint报告的风格问题。
- 保存文件的时候可以自动统一风格。
Prettier已经被一些非常流行的项目比如React、webpack、Ant Design和Babel等采用了。对于我自己的项目，我已经开始从自己的个性化风格全部转为Prettier风格。相比于Airbnb代码风格，我更推荐Prettier。