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

Question

我在我的 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"

Answer 1

看来您需要使用 html-whitespace-sensitivity 并将其设置为 ignore。

您也可以在 router-link 之前添加此注释以修复它。

<!-- display: block -->

Prettier 无法自行做出此决定，因为添加空格并非没有后果。

有关 prettier 中空白敏感度的更多详细信息 here .