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

Posted 2023-02-21

【中文标题】在 VS Code 中保存时关闭自动关闭的 HTML 标签？

【英文标题】：Close self-closing HTML tags on save in VS Code?

【发布时间】：2021-02-03 19:36:51

【问题描述】：

当我将 html sn-ps 复制到 JSX 时，我经常会出错，因为 HTML 中的自关闭标签可以像 <hr> 一样打开，但在 JSX 中它们必须始终像 <hr /> 一样关闭，是否有插件或设置可以自动为我修复这些问题？

【参考方案1】：

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
        
      ]
    
  

【参考方案2】：

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

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

替换：<$1 />

【讨论】：

这个正则表达式为我节省了大量的体力劳动。但是如果元素内有换行符（例如属性之间）则失败。 . 不匹配换行符。

【参考方案3】：

我已经在 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)"
    ]

【讨论】：

我试过了，但它似乎只在我输入标签时起作用，无法纠正粘贴的 sn-p 中的所有自闭合标签