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