Parsing error x invalid end tag

У меня есть компонент 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>
    |                                              ^

На самом деле, в моем веб-шторме закрывающий </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
            }
        }
    ]
}

< Сильный > ТЛ ; др :

Ошибка в том, что вы помещаете тег </p>, у которого нет начального тега <p>. Это потому, что вы думаете, что начальный тег автоматически закрывается анализатором в соответствии с официальная спецификация HTML из-за тега <address>, следующего за тегом <p>.

Более длинный (начальный) ответ:

Это ожидаемое поведение, как указано в официальной спецификации (Стандарт HTML). Соответственно:

Конечный тег элемента p может быть опущен, если за элементом p сразу же следуют address, article, aside, blockquote, { {X6}}, div, dl, fieldset, figcaption, figure, footer, form, {{X14 }}, h2, h3, h4, h5, h6, header, hgroup, hr , main, menu, nav, ol, p, pre, section, table или ul или если в родительском элементе больше нет содержимого, а родительский элемент является элементом HTML, который не является a, audio, del, {{ X35}}, map, noscript или video или автономный пользовательский элемент.

Что заставляет ваш элемент <p> автоматически закрываться, когда синтаксический анализатор встречает элемент <address>.

Поскольку вы, очевидно, не хотите такого поведения, вам следует использовать <div> вместо элемента <p> здесь, хотя, учитывая разметку в вашем вопросе, возможно, вам следует полностью отказаться от оболочки (т.е.: footer > address ) .