I have a Vue JS ponent like this

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

When I run vue-cli-service lint, it changes the opening <p> to <p /> and issues the following error

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

In fact, in my Webstorm, the closing </p> is marked in red Closing tag matches nothing.

I took the address tag out and it works perfectly. Is there any reason I can't use address tag?

Here is my .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/remended',
        '@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
            }
        }
    ]
}

I have a Vue JS ponent like this

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

When I run vue-cli-service lint, it changes the opening <p> to <p /> and issues the following error

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

In fact, in my Webstorm, the closing </p> is marked in red Closing tag matches nothing.

I took the address tag out and it works perfectly. Is there any reason I can't use address tag?

Here is my .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/remended',
        '@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
            }
        }
    ]
}

• javascript
• vue.js
• eslint
• vue-cli

• That because <p /> itself indicates single tag. Paired tags are written as <p>something</p>. Now the question is - why does it change the ```<p>`` tag? – Deepak Terse Commented May 16, 2020 at 14:52
• Trying to fix this lint errors automatically using the --fix keyword might cause this – Deepak Terse Commented May 16, 2020 at 14:55
• @DeepakTerse Even when it's written as <p>...</p> Webstorm says closing tag matches nothing. It seems like the address tag is causing the issue – Aniket Bhattacharyea Commented May 16, 2020 at 14:59
• This is probably because you are using <address> which is a block level element inside a <p> tag which itself is a block level element – Deepak Terse Commented May 16, 2020 at 15:22

2 Answers 2

tl;dr:

The error is that you're placing a </p> tag which has no starting <p> tag. That's because what you think is the starting tag is automatically closed by the parser, in accordance to the official HTML spec, because of <address> tag following the <p> tag.

Longer (initial) answer:

This is the expected behavior, as specified by the official spec (HTML standard). Respectively:

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.

Which causes your <p> element to be automatically closed when the <address> element is met by the parser.

Since you obviously don't want this behavior, you should use a <div> instead of a <p> element here, although, considering the markup in your question, perhaps you should ditch the wrapper altogether (i.e: footer > address).

From MDN: "Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag".

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