Vue 模板中的地址标签会破坏 lint答案

【问题标题】：address tag in Vue template breaks lintVue 模板中的地址标签会破坏 lint
【发布时间】：2020-09-02 09:59:43
【问题描述】：

我有一个像这样的 Vue JS 组件

<template>
    <footer class="main-footer">
        <p> <address>Some address</address> </p>
    </footer>
</template>

当我运行vue-cli-service lint 时，它会将开头的 更改为 并发出以下错误

error: Parsing error: x-invalid-end-tag (vue/no-parsing-error) at src/components/Footer.vue:3:46:
  1 | <template>
  2 |     <footer class="main-footer">
> 3 |         <p /><address>Some address</address> </p>
    |                                              ^

事实上，在我的 Webstorm 中，结束的 标记为红色的Closing tag matches nothing。

我去掉了address 标签，它运行良好。有什么原因我不能使用地址标签吗？

这是我的.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/recommended',
        '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        indent: ['error', 4],
        'space-before-function-paren': ['warn', 'never'],
        'vue/require-default-prop': 'off',
        'vue/no-v-html': 'off',
        'vue/html-indent': ['error', 4]
    },
    parserOptions: {
        parser: 'babel-eslint'
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)'
            ],
            env: {
                jest: true
            }
        }
    ]
}

【问题讨论】：

那是因为 本身表示单个标签。配对标签写为something。现在的问题是 - 为什么它会更改 ```
`` 标签？
尝试使用 --fix 关键字自动修复此 lint 错误可能会导致此问题
@DeepakTerse 即使写成... Webstorm 说closing tag matches nothing。似乎是地址标签导致了问题
这可能是因为您使用的是<address>，它是 标签内的块级元素，它本身就是一个块级元素

标签： javascript vue.js eslint vue-cli

【解决方案1】：

来自 MDN：“段落是块级元素，如果在关闭  标记之前解析另一个块级元素，则会自动关闭段落”。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

【讨论】：

【解决方案2】：

tl;博士：

错误是您放置了一个没有起始 标记的 标记。那是因为<address>标签跟在标签后面，所以你认为的起始标签会被解析器自动关闭，按照official HTML spec进行。

更长的（初始）答案：

这是官方规范 (HTML standard) 指定的预期行为。分别：

如果p 元素后面紧跟address、article、aside、blockquote、details、div、@987654335，则可以省略p 元素的结束标记@,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h6,@987654346,@,@987654346 hgroup, hr, main, menu, nav, ol, p, pre, section, table, 或@9876 元素父元素中没有更多内容，并且父元素是不是 a、audio、del、ins、map、noscript 或 video 元素的 HTML 元素，或者一个自主的自定义元素。

当解析器遇到<address> 元素时，这会导致您的 元素自动关闭。

由于您显然不想要这种行为，因此您应该在此处使用 <div> 而不是  元素，尽管考虑到您问题中的标记，也许您应该完全放弃包装器（即：@987654370 @)。

【讨论】：

有道理。那么如果p 后面没有紧跟地址怎么办？比如something else<address>...?
在这种情况下，'something else' 被认为是 的内容，从技术上讲，它后面跟着一个<address> 标记。当浏览器在其“内容”中遇到<address> 时，应关闭 标签。基本上您的示例与something else<address>... 相同，规范说在这种情况下您不必使用 标签，它会自动添加。规范中经常遗漏的部分是：“当更具体的元素更合适时，不应使用p 元素。”