Vue.js VSCode PRETTER/vue格式设置不'；我不能正常工作

我现在已经阅读了10-15个其他答案，但没有一个解决方案（都是相同的减去3或4）对我有效。我使用的是Prettier和Vetur，我在VSCode中也安装了ESLint扩展。在过去的3天里，我至少检查了10次设置，尝试触摸所有内容，关闭/打开VSC并保存到格式，检查问题是否仍然存在，然后继续逐个设置，以消除可疑对象。我在这里是为了在不破坏html标记和将代码分成难以辨认的B的情况下保存我的组件而不顾一切的万不得已

我期望的代码格式如下所示：

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

{{数量不足？“库存不足”：“卖出”}

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

{{数量不足？“库存不足”：“卖出”}

正如您所看到的，即使换行符也是不均匀的，并且在格式化程序方面也是零意义的…我以前从未见过它这样做。这是下一个令人讨厌的Vue/Vetur/Prettier/VScode格式错误，我很困惑为什么它会在本周突然出现问题

我已经尝试过改变小地图的换行长度、更漂亮的长度和缩进、字体大小和外观…似乎没有任何东西能让这种疯狂停止，甚至连html格式化周期都没有改变。它还格式化了我的其他一些“.vue”“当我不希望将组件分成多行时，它不会像这里那样破坏语法/html标记。我把单词wrap/line length 200+列为设置，它继续破坏我的代码

---

有什么想法吗？

我唯一能给你的建议就是停止使用漂亮的。试图与埃斯林特和维图尔合作总是痛苦的。然后我在这里找到了SO，它建议删除Prettier并使用ESlint，不仅用于linting，还用于格式化（需要版本>=6）。我现在很高兴…

我一直在为VSCode的格式问题而挣扎。我还安装了更漂亮的ESLint和Vetur扩展。但是我的代码格式规则与我的同事的有些不同（顺便说一句，他们正在使用WebStorm）

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

关闭所有Vetur格式化程序并禁用Vetur的所有格式化功能

已启用ESLint作为格式化程序

这似乎允许Prettier扩展查看Prettier插件设置的

.eslintrc.js

我建议您查看更漂亮的扩展日志来调试您的问题

在VSCode窗口的右下角，您将看到更漂亮的扩展指示器。点击这个，你可以看到日志。

---

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

我能给出的唯一建议是停止使用Prettier。试图与埃斯林特和维图尔合作总是痛苦的。然后我在这里找到了SO，它建议删除Prettier并使用ESlint，不仅用于linting，还用于格式化（需要版本>=6）。我现在很高兴…谢谢你！无论如何，我总是讨厌更漂亮的…我更喜欢美化，但在React Native中遇到了问题，所以我切换到了Prettier，在大多数情况下，它在React/Native中发挥得更好。你能帮我把答案贴出来吗？我重新下载了beautify，将HTML的Vetur设置设置为js beautify，现在一切都很好！非常感谢。我的项目文件夹中没有该eslintrc.js文件。。。曾经我不知道是什么创建了它，但是npm i和其他东西，安装所有这些扩展，它并没有创建它。现在，我已经用上面的解决方案和一些调整解决了这个问题，但我会研究一下你的建议，谢谢：）@JWhitty如果你再次使用Prettier，请记住Prettier扩展会尝试查找安装在项目的

节点模块

文件夹中的包。在我的例子中，问题是扩展找到了错误的包（不是我想要的包）。通过观察日志，我发现了扩展的错误方向。@JWhitty同样，Vetur有自己的格式化程序。如果启用此选项，Vetur的格式化程序可能会与Prettier发生冲突。我的ESLint示例是一个案例，当Vetur、Prettier和ESLint作为

.vue

文件的格式化程序时发生冲突。要调试此问题，您必须找到正在修改您的文件的确切格式化程序。

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