Vue 模板中的地址标签破坏了 lint

Question

我有一个像这样的 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
            }
        }
    ]
}

Answer 1

来自 MDN："Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing  tag"。

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

Answer 2

tl;博士:

错误是您放置的  标签没有起始  标签。那是因为根据 official HTML spec，您认为的起始标记被解析器自动关闭，因为  标记后面有 <address> 标记。

更长的（初始）答案：

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

A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

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

由于您显然不希望出现这种情况，因此您应该在此处使用 <div> 而不是  元素，不过，考虑到您问题中的标记，也许您应该放弃包装器完全（即：footer > address）。

Vue 模板中的地址标签破坏了 lint

address tag in Vue template breaks lint

javascript

eslint

vue.js

vue-cli