详解prettier使用以及与主流IDE的配合

很多前端小伙伴在日常使用prettier的时候都或多或少有一点疑惑，prettier在每一个IDE中究竟是怎样工作起来的，为什么配置有时候生效，有时又毫无效果。为了让我们的前端小伙伴更加熟悉这块，本文将对prettier在主流IDE中的使用过程一探究竟。

prettier是什么

在介绍prettier如何集成到IDE中之前，让我们了解下prettier是什么。prettier是一款代码格式化工具：

• 一个“有态度”的代码格式化工具
• 支持大量编程语言
• 已集成到大多数编辑器中

它的基本使用过程如下：

正如上面的流程图所示，prettier不过就是一个安装在机器上的软件，它接收源代码，配合prettier的配置，完成对源代码的格式化。那么如何安装prettier呢？

安装prettier

prettier实际上是通过js编写的node模块。它可以有两种方式进行安装：

1. 作为全局工具进行全局级别安装：npm install -g prettier。这种方式下，只要你配置过了全局包所在路径到环境变量，那么你就可以在命令行中使用prettier命令行调用它。
2. 作为某个前端项目进行项目级别安装：在某个项目下npm install -D pretter或是yarn add -D prettier。这种方式下，prettier作为项目级别安装，只会在你的node_modules下安装prettier的包。此时，在项目根目录下，你就可以通过调用npx prettier来调用它。

无论是哪种方式，我们的最终目的都是要安装好这个工具，并能调用它。例如，本人以全局安装方式安装了prettier以后，在命令行就能访问到它：

$ which prettier
/usr/local/bin/prettier
$ prettier --version
3.0.0

CLI使用prettier

为了简单使用prettier，我们创建一个名为prettier-demo的目录，在里面编写一个demo.js：