HTML表格标签缩进不统一，怎么按规范整理？

这个问题确实挺常见的，特别是在多人协作的项目中。HTML标签缩进不统一虽然不影响功能，但确实会严重影响代码可读性和后续维护效率。我之前也遇到过类似的问题，下面我来详细说一下我是怎么解决这类问题的。

---

### 一、为什么 VSCode 的格式化快捷键不管用？

你可能用的是默认的格式化方式，比如 Shift + Alt + F，这个快捷键依赖的是你当前使用的编辑器的默认格式化工具（比如 Prettier 或者 VSCode 内置的 HTML 格式化器）。

默认格式化器的问题在于：
- 缩进方式不统一（有的用 tab，有的用 2 个空格）
- 对表格嵌套结构处理不够智能
- 没有强制校验机制，容易反复

所以我们要从“代码规范 + 自动格式化 + 提交校验”三方面入手。

---

### 二、解决方案概述

我们要做的其实是：
1. 使用 ESLint（配合插件）对 HTML 文件进行规范校验
2. 配置统一的缩进规则（2个空格）
3. 自动修复格式问题（比如保存时自动格式化）

---

### 三、具体操作步骤

#### 步骤1：安装必要插件

如果你用的是 Vue 或 React 项目，可以使用 eslint-plugin-vue 或 eslint-plugin-react，这里以通用 HTML 项目为例。

npm install eslint eslint-plugin-html --save-dev

#### 步骤2：配置 .eslintrc.js

创建或修改 .eslintrc.js 文件，加入如下配置：

module.exports = {

  env: {

    browser: true,

    es2021: true,

  },

  extends: [

    'eslint:recommended',

  ],

  plugins: [

    'html',

  ],

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module',

  },

  rules: {

    // 设置缩进为 2 个空格

    indent: ['error', 2],

    // 强制 HTML 标签之间的缩进一致性

    'html/indent': ['error', 2, {

      'attribute': 1,

      'baseIndent': 1,

      'closeTag': 0,

      'alignAttributesVertically': true

    }],

    'no-console': ['warn'],

    'no-debugger': ['error'],

  },

};

这段配置的意思是：
- indent: JS 部分缩进是 2 个空格
- html/indent: HTML 部分缩进也是 2 个空格
- alignAttributesVertically: 如果属性换行了，也保持对齐

#### 步骤3：VSCode 配置保存时自动格式化

在 .vscode/settings.json 中添加：

{

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  },

  "eslint.validate": [

    "html"

  ],

  "editor.tabSize": 2,

  "editor.insertSpaces": true

}

这样你每次保存 HTML 文件时，ESLint 就会自动修复格式问题，并统一缩进为 2 个空格。

---

### 四、验证效果

假设你原来写的表格是这样的：

<table>

<tr><th>标题</th></tr>

<tr><td>内容</td></tr>

</table>

保存后，会被自动格式化为：

<table>

  <tr>

    <th>标题</th>

  </tr>

  <tr>

    <td>内容</td>

  </tr>

</table>

这才是我们想要的结构清晰、缩进统一的 HTML 表格结构。

---

### 五、进阶建议：在 Git 提交前做校验（可选）

你可以用 husky + lint-staged 在提交前检查 HTML 文件：

npm install husky lint-staged --save-dev

然后配置 package.json：

{

  "husky": {

    "hooks": {

      "pre-commit": "lint-staged"

    }

  },

  "lint-staged": {

    "*.html": ["eslint --fix", "git add"]

  }

}

这样就算有人绕过了编辑器设置，Git 提交前也会强制格式化。

---

### 六、总结一下

| 步骤 | 工具 | 目的 |
|------|------|------|
| 安装 eslint + html 插件 | npm install | 校验 HTML 结构 |
| 配置 .eslintrc.js | 设置缩进为 2 空格 | 统一格式标准 |
| VSCode 保存自动修复 | settings.json | 实时格式化 |
| Git 提交前校验 | husky + lint-staged | 强制统一风格 |

这样一套配置下来，团队成员不管之前习惯用几个空格还是 tab，最终都会统一成 2 个空格缩进，HTML 表格也会保持良好的缩进结构。

---

如果你还有前后端模板混合写法（比如 PHP 或 Vue 模板），我也可以补充那部分的配置。欢迎继续问。

这个问题挺常见的，团队协作时缩进不统一确实容易出幺蛾子。直接告诉你怎么搞：

1. 首先确保VSCode安装了 Prettier 插件，这个是格式化的神器。
2. 然后在项目根目录创建或修改 .prettierrc 文件，加上这些配置：

{

  "tabWidth": 2,

  "useTabs": false,

  "htmlWhitespaceSensitivity": "strict"

}

3. 再确保VSCode的设置里勾选了 Editor: Format On Save，保存时自动格式化。

搞定之后，把混乱的HTML代码复制过去试试，应该就能按2个空格统一缩进了。如果还有问题，可能是其他插件冲突，关掉多余的HTML格式化工具就行。

最后提醒一句，eslint主要用于JS代码规范，对HTML缩进支持有限，这种场景还是Prettier更靠谱。