在团队前端协作开发中，HTML代码的缩进一致性和风格统一直接影响代码的可读性和维护效率，不同开发者的编辑器配置差异往往会导致提交后的代码出现格式混乱，因此掌握HTML编辑器的缩进设置方法，建立统一的团队规范十分必要。
主流HTML编辑器的缩进设置方法
VS Code编辑器配置
VS Code是目前使用最广泛的代码编辑器之一，设置HTML缩进可以通过两种方式实现。第一种是全局设置，打开设置面板搜索editor_tabSize，将值设置为团队约定的缩进长度，比如2或者4，同时搜索editor_insertSpaces设置为true，使用空格代替制表符作为缩进单位。第二种是针对HTML文件单独设置，在项目根目录创建.vscode/settings.json文件，添加如下配置：
{
// 设置HTML文件缩进为2个空格
"[html]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false
},
// 保存时自动格式化代码
"editor.formatOnSave": true
}Sublime Text编辑器配置
打开Sublime Text的偏好设置，选择Settings，在打开的配置文件中添加如下内容，即可统一HTML的缩进规则：
{
// 缩进长度为2个空格
"tab_size": 2,
// 使用空格代替制表符
"translate_tabs_to_spaces": true,
// 自动检测缩进规则关闭，强制使用配置
"detect_indentation": false
}团队HTML代码风格规范核心内容
除了编辑器缩进设置，团队还需要明确HTML代码风格的其他约定，形成完整的规范文档：
- 缩进规则：明确使用空格还是制表符，缩进长度统一为2或4，禁止混合使用不同缩进方式
- 标签格式：单标签是否需要闭合，比如<img>和<img/>的写法统一，嵌套标签的子元素必须缩进
- 属性顺序：HTML标签的属性按照class、id、name、src、href等固定顺序排列，提升可读性
- 引号使用：属性值统一使用双引号还是单引号，禁止同一项目中混用两种引号
- 空行规则：不同模块之间、父子组件之间添加空行分隔，避免代码过于紧凑
团队规范落地执行方案
仅靠编辑器配置无法完全保证所有成员都遵守规范，需要搭配工具实现强制约束：
使用EditorConfig统一基础配置
在项目根目录创建.editorconfig文件，该文件可以被绝大多数编辑器识别，基础配置如下：
# 根目录配置 root = true # 所有文件通用规则 [*] # 字符集为utf-8 charset = utf-8 # 缩进使用空格 indent_style = space # 缩进长度为2 indent_size = 2 # 换行符为lf end_of_line = lf # 文件末尾添加空行 insert_final_newline = true # 去除行末尾空格 trim_trailing_whitespace = true # HTML文件单独规则 [*.html] indent_size = 2
搭配Prettier自动格式化
安装Prettier工具，在项目根目录创建.prettierrc文件，配置HTML的格式化规则，团队成员提交代码前运行格式化命令，即可保证代码风格统一：
{
// HTML缩进为2个空格
"tabWidth": 2,
// 使用空格缩进
"useTabs": false,
// 属性值使用双引号
"singleQuote": false,
// HTML单标签不闭合
"htmlWhitespaceSensitivity": "ignore"
}Git提交时校验
搭配husky和lint-staged工具，在Git提交代码时自动校验HTML文件的格式，不符合规范的代码无法提交，从流程上保证规范落地：
// package.json配置
{
"lint-staged": {
"*.html": [
"prettier --write",
"git add"
]
}
}注意事项
团队成员首次接入规范时，需要统一更新编辑器配置，避免本地配置覆盖项目配置。如果项目中存在历史遗留的格式混乱代码，可以安排统一时间批量格式化，之后严格按照规范提交新代码，逐步完成整个项目的风格统一。