时间戳

首页 > 解决方案 > 在自己的行上开始和结束标记 - vue html更漂亮

javascript - 在自己的行上开始和结束标记 - vue html更漂亮

问题描述

我在我的 Vue 项目中使用 prettier 来格式化我的代码。我有一些想要更改的东西，但我无法在 stackoverflow 或其他任何地方（github、google 等）上找到解决方案。我希望这里有人可以帮助我解决这个问题。

给出这个输入

<router-link class="underline pointer" :to="routeToEditLocation(location.id)">{{ t('Edit') }}</router-link>

给我这个输出

<router-link
    class="underline pointer"
    :to="routeToEditLocation(location.id)"
>{{ t('Edit') }}</router-link>

但我想看到的是这个

<router-link
    class="underline pointer"
    :to="routeToEditLocation(location.id)"
>
    {{ t('Edit') }}
</router-link>

任何人都有我更漂亮的设置的解决方案？使用以下设置

trailingComma: "all"
tabWidth: 4
semi: true
singleQuote: true
arrowParens: "avoid"
prose-wrap: "never"
parser: "vue"

标签： javascriptvue.jsprettier

解决方案

看来您也需要使用html-whitespace-sensitivity和设置它ignore。

您也可以在router-link修复之前添加此评论。

<!-- display: block -->

Prettier 不能自己做出这个决定，因为添加空格并非没有后果。

有关更漂亮的空格敏感度的更多详细信息，请点击此处。

推荐阅读