Prettier 是 javascript 代码灵活美化工具

搭配ESLint一起工作

很多项目都会使用ESLint来提高代码的质量，集成Prettier和ESLint 是代码美化，统一代码风格规范，并减少团队中的相互代码约束力。

Prettier

Prettier是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点： 
1. 可配置化 
2. 支持多种语言 
3. 集成多数的编辑器 
4. 简洁的配置项

安装

使用npm

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

使用ESLint运行Prettier

如果你已经在你的项目中使用ESLint并且想要只通过单独一条命令来执行你的所有的代码检查的话，你可以使用ESLint来为你运行Prettier。

只需要使用eslint-plugin-prettier来添加Prettier作为ESLint的规则配置。

yarn add --dev prettier eslint-plugin-prettier

.eslintrc.json

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

关闭ESLint的格式规则

你是否通过ESLint来运行Prettier，又或者是单独运行两个工具，那你大概只想要每个格式问题只出现一次，而且你特别不想要ESLint仅仅是和Prettier有简单的不同和偏好而报出“问题”。

所以你大概想要禁用冲突的规则（当保留其他Prettier不关心的规则时）最简单的方式是使用eslint-config-prettier。它可以添加到任何ESLint配置上面。

yarn add --dev eslint-config-prettier

.eslintrc.json

{
  "extends": ["prettier"]
}

参考文档：

ESLint 官方文档

prettier官方文档

perttier gitHub文档