在 VS Code 中保存时关闭自关闭 HTML 标签？

Question

当我将 HTML 片段复制到 JSX 中时，我经常遇到错误，因为 HTML 中的自关闭标签可以像<hr>一样未关闭，但在 JSX 中它们必须始终像<hr />一样关闭，是否有插件或设置可以自动修复这些我？

Answer 1

我已经在 VS Code 中使用了这个扩展有一段时间了。 在 Javascript 和 Typescript 中与 React 配合得非常好 - https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 。 该文档说它默认适用于以下语言。 尝试一下，看看它是否适合您的需求。

{
    "auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (Eex)"
    ]
}

Answer 2

我最终通过对所有无效元素进行正则表达式查找和替换来解决它。

查找： <((area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr).*?[^\\/])>

替换： <$1 />

Answer 3

First you need to write below code in your settings.json

{
"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
}


then create a .eslintrc file in root level and write this code

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