一行上的开始和结束标记-Vue HTML Prettier

Question

我在Vue项目中使用了漂亮的代码来格式化我的代码。我有一些我想更改的东西，但我只是在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 -->

更漂亮的东西无法独自做出决定，因为添加空格并非没有后果。

有关更漂亮的here中的空白敏感度的详细信息。