Prettier的介绍

1、什么是Prettier？

---

Prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

2、为什么要用Prettier？

---

用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格或者符号之类的，这样相对来说不太优雅，利用格式化工具自动生成省时省力。

3、Prettier的优势

---

1. 可配置化

2. 支持多种语言

3. 集成多数的编辑器

4. 简洁的配置项

4、自定义配置Prettier

---

Prettier提供了一套默认的配置，那么如何修改配置项符合我们自己的代码规范呢，有三种方法可以做到：

1、.prettierrc 文件

2、prettier.config.js 文件

3、package.json 中配置prettier属性

Prettier会检查配置文件并自动读取文件中的配置，我们只需要选一种方法配置就好了，我现在选的是第二种。

5、Prettier的安装

---

使用yarn：

yarn add prettier --dev --exact

# or globally

yarn global add prettier

使用npm：

npm install --save-dev --save-exact prettier

# or globally

npm install --global prettier

6、Prettier和ESLint一起使用

很多项目都会使用ESLint来提高代码的质量，有两种方式能够集成Prettier和ESLint，你也可以单独或同时使用它们。

使用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"]

}