VSCode漂亮/ Vue格式设置无法正常运行

如何解决VSCode漂亮/ Vue格式设置无法正常运行

我现在已经阅读了大约10-15个其他答案，但没有一个解决方案（都是相同的负3或4）对我有用。我正在使用Prettier和Vetur，并且在VSCode中也安装了ESLint扩展。在过去3天内，我至少查看了10次设置，以尝试涉及所有内容，关闭/打开VSC并保存为格式，检查问题是否仍然存在，并继续逐个设置逐一尝试消除此问题嫌疑犯。我在这里是无奈之下的最后一招，能够保存我的组件而不会破坏我的html标签并将代码分成难以理解的BS。

我期望的代码格式如下：

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)"
>{{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}</button>

并且我的格式化程序导致“ ... isInteger（quantity）”之后的行尾出现断行，这破坏了我整个组件的语法/出现了主要的linter错误（显然）。

<button
    class="btn btn-success"
    @click="sellStock"
    :disabled="
         insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)
       "
    >
       {{ insufficientQuantity ? "Not enough Stocks" : "Sell" }}
    </button>

如您所见，即使换行符也是不均匀的，并且使格式化趋于零...我以前从未见过这样做。这是现在令人烦恼的下一个Vue / Vetur / Prettier / VScode格式错误，对于为什么它在本周突然发挥作用，我感到很困惑。

我尝试更改自动换行长度和更漂亮的长度和缩进，字体大小以及迷你地图的外观... 什么都没有似乎使这种疯狂停止了，甚至没有改变html格式期。当我不想要它时，它还会将我的其他一些“ .vue”组件格式化为多行，但是不会破坏语法/ html标签，就像这里一样。在所有列为设置的地方，我都把自动换行/行长设置为200+，并且它继续破坏我的代码。

有什么想法吗？

解决方法

我只能给出的建议是停止使用Prettier。试图使其与ESlint和Vetur配合使用总是很痛苦。然后我在SO上找到this question (and self answer)，它建议删除Prettier并不仅将ESlint用于棉绒而且还将其用于格式设置（需要版本> = 6）。我现在很蛤lam ...

,

我一直在为VSCode的格式遇到类似的问题。我还安装了Prettier，ESLint和Vetur扩展。但是我的代码格式设置规则与我的同事有所不同（顺便说一下，他们正在使用WebStorm）。

就我而言，问题是通过以下方式解决的：

1. 关闭所有Vetur格式化程序，并禁用Vetur的所有格式化功能。
2. 启用ESLint作为格式化程序。

这似乎允许Prettier扩展查看安装了Prettier插件的.eslintrc.js。

我建议您查看Prettier扩展日志以调试问题。

在VSCode窗口的右下角，您将看到Prettier扩展指示器。单击此按钮，您可以查看日志。

显示日志后，您可以看到扩展从何处获取Prettier配置，或从何处导入Prettier模块。

,

是什么帮助我解决了这种情况，我在 VSCode Vetur > Format > Default Formatter: HTML 中进入了 Vetur 的扩展设置并选择了 js-beautify-html。