一、为什么要使用prettier

---

一句话解释：prettier是一个代码格式化工具，按保存键时，可自动格式化代码，解决代码风格的问题

二、如何在项目中加入prettier

---

（1）在本地安装 Prettier

npm install prettier -D

（2）创建配置文件

在项目根目录创建.prettierrc文件,可根据实际情况添加配置

示例：

{
  "semi": false,  // 结尾不使用分号
  "singleQuote": true,  // 是否使用单引号
  "printWidth": 120, // 单行代码最长字符长度
  "tabWidth": 2, // 缩进大小
  "trailingComma": 'none',  // 尾随逗号
  "bracketSpacing": true,  // 对象字面量中括号之间的空格
  "jsxSingleQuote": true // 在JSX中使用单引号
}

（3）配置你的编辑器

下载Prettier - Code formatter插件

在项目根目录创建.vscode文件夹，创建settings.json文件

{
    // 编辑器默认使用 prettier 格式化代码
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 保存代码时，格式化代码
    "editor.formatOnSave": true,
    // 保存代码时，修复代码
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

至此，你已经可正常使用Prettier了，不过建议还是配置一下 .prettierignore 文件

（4）创建Prettier忽略文件的配置文件，让 Prettier 和编辑器知道哪些文件不要格式化

在项目根目录创建.prettierignore文件 .prettierignore

示例：

dist
node_modules
.gitignore
package.json
.editorconfig

更多内容请参考 prettier 官网www.prettier.cn/