0. 背景
近期有項(xiàng)目要使用 ant design pro 做開發(fā),前端開發(fā)工具統(tǒng)一使用 vscode,大家提交的代碼格式不太統(tǒng)一,為了方便開發(fā)挑随,多方查找資料,找到了合適的插件進(jìn)行代碼的格式化勒叠。
1. 插件及相關(guān)配置
需安裝插件列表
-
Prettier - Code formatter
Prettier -
EditorConfig for VS Code
EditorConfig
需添加文件配置
以下文件需要添加到項(xiàng)目根目錄
- .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
執(zhí)行下面命令添加
npm install --save-dev --save-exact prettier
或者yarn add -D -E prettier
添加結(jié)果
package.json
package.json
2. 使用方法
打開需要格式化的文件兜挨,使用如下快捷鍵
windows: CTRL + ALT + F
mac: SHIFT + ALT + F