代码格式化神器Prettier！

官网

Prettier · Opinionated Code Formatter Opinionated Code Formatter https://prettier.io/

1.安装Prettier依赖

1.1 全局安装

配置简单，使用方便，然而每个人可能使用不同的编辑器，版本、配置不好统一，很难预设一份配置表给所有人共享。所以个人使用没问题，团队推广不太适合。

npm install -g prettier

1.2 项目级别安装（推荐）

Prettier作为开发依赖记录在package.json里，跟着项目走，版本统一，既可以使用官方的默认配置，也可以指定一套内容的配置项。适合团队协作。

# 在项目根目录下执行安装命令
npm install -D prettier

2.VsCode配置方式

2.1 安装插件

2.2 直接使用

右键，选择第二个格式化文档（用来选择格式化方式）

选择Prettier方式格式化（或配置默认格式化程序，之后即可右键直接点击第一个格式化文档，不用选择方式了）

2.3 配置Prettier

每次都需要手动格式格式化比较麻烦，所以可以配置保存时格式化

2.3.1 配置默认格式化方式

保存时格式化使用的是默认格式化方式，需要先配置默认格式化文档方式为Prettier

右键选择第二个格式化文档

选择配置默认格式化文档方式

选择Prettier

2.3.2 设置保存时格式化

ctrl/command + ,打开设置页面，输入edit.formatOnSave，进行勾选

3.WebStorm配置方式

3.1 安装插件

插件市场搜索Prettier进行安装

3.2 直接使用

快捷键：ctrl/command + alt/option + shift + p

3.3 配置Prettier

4.Prettier配置文件

根目录下创建文件.prettierrc，写json格式的配置

配置文件还可以有很多种格式，配置项也有很多，具体可以参考官方配置文件文档： Configuration File · Prettier 中文网 Prettier uses cosmiconfig(https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure Prettier via (in order of precedence): https://www.prettier.cn/docs/configuration.html