1. VSCode 集成 Prettier 插件

VSCode 中集成 Prettier 插件的首要条件，就是你得先 安装了 VSCode。

安装好 VSCode 之后，就可以按照下面的步骤来安装并配置了。

通常来说 Prettier 不会单独使用，建议搭配 ESLint 一起使用。

1.1 插件安装

保姆级 VSCode 插件检索和安装流程请查阅文章：附：IDE 集成 ESLint 插件

在 VSCode 中直接检索 Prettier，选择 Prettier - Code formatter 这个插件安装。

1.2 插件配置

Prettier 不是必须给项目指定 Prettier 配置。打开 Prettier 的设置界面，你可以看到所有的 Prettier 规则的当前设置。

这些配置仅针对你目前的这个 VSCode 有效，是无法在项目中通用的，(默认)也无法在多个 VSCode 间共享。

如果你的项目里有包含 Prettier 的配置，VSCode 将会优先使用项目里的 Prettier 配置。

如需给项目集成 Prettier，请查阅：三、文本文件规范的利器——Prettier

你可以通过查看 Prettier 的输出面板，来查看 Prettier 的运行情况：

1.3 formatter 选择

请查阅文章：附：IDE 集成 ESLint 插件
在这篇文章的 1.3 节介绍了如何选择 formatter，以及如何设置默认的 formatter

2. Webstorm 集成 Prettier 插件

如果你使用的是 VSCode，请忽略掉下文。

Webstorm 中集成 ESLint 插件的首要条件，就是你得先 安装了 Webstorm。

安装好 Webstorm 之后，就可以按照下面的步骤来配置了。

首先用 Webstorm 打开一个项目，然后打开左上角 Files -> Settings -> Plugins，在里面搜索 Prettier，你会看到 Prettier 这个插件是已经安装了的。

然后在这个弹窗的左侧搜索 Prettier 进行配置

配置好之后，就可以在 Webstorm 中单独使用 Prettier 了。

3. 总结

总体来说，在 VSCode 中使用 Prettier 需要单独安装插件，对于刚入坑的 developer 来说会比较麻烦，但熟悉了之后，就会感受到它灵活带来的好处。在 Webstorm 中使用 Prettier 很方便，只需要进行简单的设置即可，因为 Webstorm 本身就集成了 Prettier 插件。

每个 IDE 各有各的特点，只要能满足自己的需求、符合自己的开发习惯，都是不错的 IDE。