如何阻止自闭合标签转为非自闭合形式？配置无效求助

问题根源分析 #

你遇到的情况大概率是工具链不匹配，或是有其他格式化工具（比如Prettier）在覆盖你的配置：

• TSLint已停止维护，多数现代项目已切换到ESLint，TSLint的配置不会生效
• Prettier默认会强制HTML原生无内容标签（如link、img）转为自闭合形式，优先级可能高于ESLint规则

具体解决步骤 #

1. 切换到ESLint（若仍在用TSLint） #

如果项目还在使用TSLint，建议迁移到ESLint，然后在ESLint配置文件（.eslintrc.json或.eslintrc.js）中添加规则：

{
  "rules": {
    "react/self-closing-comp": ["error", {
      "component": false,
      "html": false
    }]
  }
}

2. 修改Prettier配置（若启用了Prettier） #

Prettier的默认行为会覆盖ESLint规则，需要在.prettierrc或prettier.config.js中关闭自闭合标签强制转换：

{
  "selfClosingTags": false,
  // 其他自定义Prettier配置示例
  "singleQuote": true,
  "printWidth": 120
}

如果只想针对特定文件类型生效，可使用overrides：

{
  "overrides": [
    {
      "files": ["*.html", "*.jsx", "*.tsx"],
      "options": {
        "selfClosingTags": false
      }
    }
  ]
}

3. 确保VSCode格式化工具关联正确 #

在VSCode的settings.json中，设置对应文件类型使用ESLint格式化，避免默认HTML formatter自动修改：

{
  "[html]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

4. 验证配置 #

运行ESLint修复命令手动测试：

npx eslint --fix path/to/your/file.tsx

若标签成功转为非自闭合形式，说明配置生效。

额外说明 #

虽然HTML规范中，link这类无内容的void元素不需要闭合标签，但如果是项目特定要求，上述步骤可解决强制自闭合的问题。

内容的提问来源于stack exchange，提问作者thienms98