当我将 HTML 片段复制到 JSX 中时，我经常会遇到错误，因为 HTML 中的自关闭标签可以像这样打开，<hr>但在 JSX 中它们必须总是像这样关闭<hr />，是否有插件或设置可以自动为我修复这些？
在 VS Code 中保存时关闭自动关闭的 HTML 标签？
IT技术
html
reactjs
visual-studio-code
jsx
2022-07-31 01:38:09
3个回答
我最终通过对所有void 元素进行正则表达式查找和替换来解决它。
寻找：<((area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr).*?[^\/])>
代替：<$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
}
]
}
}
我已经将这个扩展与 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)"
]
}