什么是Prettier？

什么是Prettier？

一、介绍Prettier

Prettier 的原理非常简单，不管你写的代码是个什么鬼样子，Prettier 会去掉你代码里的所有样式风格，然后用统一固定的格式重新输出。

1.1 代码格式化（An opinionated code formatter）
官方首先告诉你，Prettier 是一个 Opinionated 的代码格式化工具。Prettier 说自己是一个 Opinionated code formatter，就是说：你必须认同我的观点，按照我说的做。且在很多地方，你都可以看见opinionated和unopinionated的影子，例如：


1.2 支持多种语言（Supports many languages）
HTML,CSS,JS,JAVA,PHP,Ruby,Swift,Python基本上目前世界上的流行语言，prettier都可以支持代码格式化。
1.3 支持多种IDE（Integrates with most editors）
1.4 及其少的设置（Has few options）

二、Prettier的用法

2.1 手动格式化

npm下载：npm install prettier --save-dev --save-exact

// 命令行输入：npx prettier --write 文件路径，例如：
npx prettier --write src/App.vue

2.2 集成IDE格式化（这里列举vscode）

先安装扩展插件。

配置保存或者粘贴自动格式化即可。

三、Prettier和Linters之间的关系

各种 Linters 其实更多的是帮助你检查代码而不是格式化，Linters是按照规则(Rules)去检查代码的，遇到不符合规则的代码就会提示你，有的规则还能自动帮你解决冲突。例如 ESLint 遇到 incorrect code 的时候，会提示你违反规则，让你修改代码以符合规则。

而 Prettier 与Linters的区别就是，它根本不管你之前符不符合什么规则，都先把你的代码解析成 AST，然后按照它自己的风格给你重新输出代码。换句话说，Prettier 对应的是各种 Linters 的 Formatting rules 这一类规则。而且你用了 Prettier 之后，就不会再违反这类规则了！不需要你自己手动修改代码。