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

Question

我有一个这样的 Vue JS 组件

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

当我运行 vue-cli-service lint , 它改变了开口 <p>至 <p />并发出以下错误

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中，关闭</p>标记为红色 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

tl;dr:

错误是您放置了一个 </p>没有起始 <p> 的标签标签。那是因为根据 official HTML spec，您认为开始标记会被解析器自动关闭。 , 因为 <address> <p> 之后的标签标签。

---

更长的(初始)答案:

这是官方规范 (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.

这会导致您的 <p> <address> 时自动关闭元素解析器满足元素。

既然你显然不想要这种行为，你应该使用 <div>而不是 <p>元素在这里，虽然，考虑到你问题中的标记，也许你应该完全放弃包装(即: footer > address )。