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

Posted 2023-02-23

【中文标题】Vue 模板中的地址标签会破坏 lint

【英文标题】：address tag in Vue template breaks 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 时，它会将开头的<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,ts?(x)',
                '**/tests/unit/**/*.spec.j,ts?(x)'
            ],
            env: 
                jest: true
            
        
    ]

【问题讨论】：

那是因为<p /> 本身表示单个标签。配对标签写为<p>something</p>。现在的问题是 - 为什么它会更改 ```

尝试使用 --fix 关键字自动修复此 lint 错误可能会导致此问题

@DeepakTerse 即使写成<p>...</p> Webstorm 说closing tag matches nothing。似乎是地址标签导致了问题

这可能是因为您使用的是<address>，它是<p> 标签内的块级元素，它本身就是一个块级元素

【参考方案1】：

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

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

【参考方案2】：

tl;博士：

错误是您放置了一个没有起始<p> 标记的</p> 标记。那是因为<address>标签跟在<p>标签后面，所以你认为的起始标签会被解析器自动关闭，按照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> 元素时，这会导致您的<p> 元素自动关闭。

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

【讨论】：

有道理。那么如果p 后面没有紧跟地址怎么办？比如<p>something else<address>...?

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