什么是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 之后,就不会再违反这类规则了!不需要你自己手动修改代码。
|