0. 背景

近期有项目要使用 ant design pro 做开发，前端开发工具统一使用 vscode，大家提交的代码格式不太统一，为了方便开发，多方查找资料，找到了合适的插件进行代码的格式化。

1. 插件及相关配置

需安装插件列表

• Prettier - Code formatter

  
  Prettier

• EditorConfig for VS Code

  
  EditorConfig

需添加文件配置
以下文件需要添加到项目根目录

• .editorconfig

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

• .prettierignore

**/*.md
**/*.svg
package.json
.umi
.umi-production

• .prettierrc

{
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

需添加依赖

• prettier
  执行下面命令添加
  npm install --save-dev --save-exact prettier 或者 yarn add -D -E prettier
  添加结果
  package.json
  package.json

2. 使用方法

打开需要格式化的文件，使用如下快捷键
windows: CTRL + ALT + F
mac: SHIFT + ALT + F