如何< /a>在一个Vue.js项目中保持结束标记在同一行,而所有其他标记在新行?

gk7wooem  于 2023-01-17  发布在  Vue.js
关注(0)|答案(3)|浏览(204)

vue/html-closing-bracket-newline在链接文本后添加了一个意外的空格。删除空格会在prettier和eslint中产生冲突和错误。正在寻找一个解决方案,通过简单的配置更改来克服这个问题,而不是逐行忽略注解。
vue/html-closing-bracket-newline将所有结束标记移动到新行,这会在链接文本后添加意外的空格

<a
 href="#"
 place="linkText"
 target="_blank">
lorum ipsum
</a>

link space
预期的代码语法格式为

<a
 href="#"
 place="linkText"
 target="_blank">lorum ipsum</a>

但它在prettier / eslint / vue之间产生了冲突。
prettier / eslint error
一个简单的解决方案是在每个锚标签中添加<!-- eslint-disable-line -->。但是我们正在寻找一个简单的解决方案来覆盖项目中的所有锚标签。

3yhwsihp

3yhwsihp1#

就这么办吧:

<a href="#"
     place="linkText"
     target="_blank">
    lorum ipsum</a>
42fyovps

42fyovps2#

  • 在Windows上使用Ctrl + ,(或在Mac上使用CMD + ,)打开编辑器设置。
  • 搜索HTML右括号,您将看到一个类似于所附图像的屏幕。

如果它是 unchecked,你可以继续检查它。这个设置的作用是在最后一个字母的同一行添加右括号,而不是像你现在所经历的那样,把它放在下一行。
您也可以在settings.json文件中编辑它,如下所示:

"prettier.bracketSameLine": true

如果你想访问更多的brackets设置选项,你可以在你的VS代码用户设置中搜索bracket,然后使用这些选项。

sg3maiej

sg3maiej3#

此问题与空格敏感格式有关。此属性htmlWhitespaceSensitivity接受以下选项:

  • "css"-遵守CSS显示属性的默认值。对于手柄,将其视为严格值。“默认”
  • "strict"-所有标记周围的空白(或缺少空白)被视为重要。
  • "ignore"-所有标记周围的空白(或缺少空白)被视为无关紧要。

您可以通过将以下规则添加到.eslintrc.js文件(rules部分)来修复它:

"prettier/prettier": [
  "warn",
  {
    htmlWhitespaceSensitivity: "strict"
  }
]

它会认为空白在所有情况下都是“重要的”,这意味着:

<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.</div>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div>

<!-- output -->
<span class="dolorum atque aspernatur"
  >Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at"
  >Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.</div
>
<div class="voluptatem architecto at">
  Architecto rerum architecto incidunt sint.
</div> <!-- in this case you would have the whitespace -->

它把</div放在字符串的末尾,把>放在下一行,看起来很难看,但是它解决了这个问题。
您可以在这里阅读更多信息:
https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting 这里有一个Github关于pretier的老问题,和你在这里提到的一样:
https://github.com/prettier/prettier/issues/6290

相关问题