使用 .editorconfig 统一 css 格式需安装 EditorConfig 插件，在项目根目录创建配置文件定义缩进、换行等规则，并可结合 Prettier 实现保存时自动格式化，确保团队编码风格一致。
在 vscode 中统一 CSS 代码格式，推荐使用 .editorconfig 文件来规范团队或项目中的编码风格。EditorConfig 能帮助开发者在不同编辑器和环境中保持一致的代码格式，尤其适用于协作开发。
1. 安装 EditorConfig 插件
VSCode 默认支持部分 EditorConfig 功能，但为了完整兼容，建议安装官方插件：
- 打开 VSCode 扩展市场（快捷键 Ctrl+Shift+X）
- 搜索 EditorConfig for VS Code
- 点击安装，确保插件已启用
2. 创建 .editorconfig 文件
在项目根目录创建名为 .editorconfig 的文件（注意前面有个点），内容如下：
[*.css]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 80
说明：
立即学习“前端免费学习笔记（深入）”；
- indent_style = space：使用空格缩进
- indent_size = 2：CSS 缩进为 2 个空格
- end_of_line = lf：换行符使用 unix 风格（linux/macOS）
- trim_trailing_whitespace：自动删除行尾空格
- insert_final_newline：文件末尾自动插入换行
- max_line_length：建议每行不超过 80 字符（仅提示作用）
3. 配合 Prettier 实现自动格式化（可选但推荐）
EditorConfig 定义了基础规则，若需保存时自动格式化 CSS，建议搭配 Prettier：
- 安装 Prettier – Code formatter 插件
- 在项目根目录添加 .prettierrc 文件：
{ “semi”: false, “trailingComma”: “es5”, “singleQuote”: true, “printWidth”: 80, “tabWidth”: 2 }
- 右键 CSS 文件选择“格式化文档”，或设置保存时自动格式化：
“[css]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode“, “editor.formatOnSave”: true }
4. 验证配置是否生效
打开一个 CSS 文件，尝试以下操作：
- 修改缩进为空格并检查是否为 2 格
- 输入长行内容看是否软换行提示
- 保存文件，观察是否自动去除行尾空格和补全末尾换行
如果一切正常，说明 .editorconfig 已生效。
基本上就这些。EditorConfig 不负责复杂样式美化，但它能统一基础格式。配合 Prettier 使用，CSS 代码风格会更整洁一致。不复杂但容易忽略的是：确保插件已安装且 .editorconfig 放在项目根目录。