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

【问题标题】：VSCode prettier/vue formatting settings don't work properlyVSCode prettier/vue 格式设置无法正常工作
【发布时间】：2021-01-26 16:47:50
【问题描述】：

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

有什么想法吗？

【问题讨论】：

我能给出的唯一建议是停止使用 Prettier。试图让它与 ESlint 和 Vetur 一起工作总是很痛苦。然后我在 SO 上找到了this question (and self answer)，它建议放弃 Prettier 并使用 ESlint 不仅用于 linting，还用于格式化（需要版本 >= 6）。我现在高兴得像蛤蜊...
谢谢！无论如何，我一直讨厌 Prettier……我更喜欢 Beautify，但在 React Native 中遇到了问题，所以我切换到 Prettier，它在大多数情况下与 React/Native 配合得更好。您可以将其发布为答案，以便我标记它吗？我重新下载了美化，将 HTML 的 Vetur 设置设置为 js-beautify，现在一切都很好！谢谢！

标签： vue.js visual-studio-code prettier eslintrc

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

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

【讨论】：

我的项目文件夹中没有那个 eslintrc.js 文件......从来没有。我不知道是什么创建了它，但 npm i 和其他东西，安装所有这些扩展，而不是创建它。现在我已经解决了上述解决方案的问题并进行了一些调整，但我会考虑你的建议，谢谢:)
@JWhitty 如果您再次使用 Prettier，请记住 Prettier 扩展会尝试查找安装在项目的 node_modules 文件夹中的包。就我而言，问题在于扩展程序找到了错误的包（不是我想要的包）。观察日志让我发现了扩展的误导。
@JWhitty 另外，Vetur 有自己的格式化程序。如果打开此选项，Vetur 的格式化程序可能会与 Prettier 发生冲突。我的 ESLint 示例是 Vetur、Prettier 和 ESLint 都作为 .vue 文件的格式化程序发生冲突的情况。要调试此问题，您必须找到正在修改文件的确切格式化程序。

【解决方案3】：

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

【讨论】：

感谢我回到这些 vue 项目时也尝试一下：D

【解决方案4】：

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

我遇到的问题是 .vue 文件中的 html 格式错误（特别是我有一个不应该存在的结束标签）。

我在保存时依赖它格式化，当它不起作用时，我尝试手动选择“格式化文档更漂亮”，但什么也没做。

只有当我查看输出窗口时（我应该立即完成），我才看到它在抱怨关闭 div 标记放错了位置。

这是一个愚蠢的疏忽，但很容易做到。

【讨论】：