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

Question

我现在已经阅读了大约 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+，它被列为设置并且它继续破坏我的代码。

有任何想法吗？

原文由 PhilosophOtter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我能给的唯一建议就是停止使用 Prettier。试图让它与 ESlint 和 Vetur 一起工作总是很痛苦。然后我在 SO 上发现 了这个问题（和自我回答） ，它建议放弃 Prettier 并使用 ESlint 不仅用于 linting，还用于格式化（需要版本 >= 6）。我现在很开心…

原文由 Michal Levý 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

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

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

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

原文由 Aningaaq 发布，翻译遵循 CC BY-SA 4.0 许可协议