VSCode prettier/vue 格式设置无法正常工作

Question

我现在已经阅读了大约 10-15 个其他答案，并且 none 的解决方案（都是相同的负 3 或 4）对我有用。我正在使用 Prettier 和 Vetur，并且还在 VSCode 中安装了 ESLint 扩展。在过去的 3 天里，我至少查看了 10 次设置，试图触及所有内容，close/open 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)" 之后行尾的 " 断行，这打破了我整个组件的 syntax/major 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”组件格式化为多行，但它不会 breaking syntax/html 标签，因为它是这里。我已经将 word-wrap/line-length 200+ 列为设置的所有地方，它继续破坏我的代码。

有什么想法吗？

Answer 1

我唯一能给出的建议就是停止使用 Prettier。试图让它与 ESlint 和 Vetur 一起工作总是很痛苦。然后我在 SO 上找到了 this question (and self answer)，它建议放弃 Prettier 并使用 ESlint，不仅用于 linting，还用于格式化（需要版本 >= 6）。我现在很开心...

Answer 2

我一直在努力解决与 VSCode 格式类似的问题。我还安装了 Prettier、ESLint 和 Vetur 扩展。但是我的代码格式化规则与我的 co-worker 的有点不同（顺便说一句，他们使用的是 WebStorm）。

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

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

这似乎允许 Prettier 扩展查看 .eslintrc.js，其中设置了 Prettier 插件。

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

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

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

Answer 3

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

Answer 4

我刚遇到这个问题并解决了它。

我遇到的问题是 .vue 文件中的 html 格式不正确（具体来说，我有一个不应该存在的结束标记）。

我依靠它在保存时格式化，当它不起作用时，我尝试手动选择“使用更漂亮的格式文档”，但没有任何作用。

只有当我查看输出 window（我应该立即完成）时，我才发现它在抱怨错误放置的结束 div 标记。

这是一个愚蠢的疏忽，但很容易造成。

VSCode prettier/vue 格式设置无法正常工作

VSCode prettier/vue formatting settings don't work properly

vue.js

visual-studio-code

prettier

eslintrc