如何在 VS 代码拆分属性中阻止 Prettier 到多行?

Posted

技术标签:

【中文标题】如何在 VS 代码拆分属性中阻止 Prettier 到多行?【英文标题】:How do you stop Prettier in VS code splitting attributes onto multiple lines? 【发布时间】:2019-10-10 23:22:37 【问题描述】:

我在 VS Code 中使用 prettier 来格式化我的代码,但我真的不喜欢它的做法。

我的主要问题是将属性拆分为多行。

<input
    type="checkbox"
    name="asiaNews"
    id="asiaNews"
    value="asiaNews"
/>

我更喜欢它看起来像这样

<input type="checkbox" name="asiaNews" id="asiaNews" value="asiaNews" />

我在docs 或 SO 上找不到任何东西

How to prevent VS Code from breaking up long html lines into multiple lines?

有没有办法做到这一点,或者我可以使用不同的工具,这样我就可以拥有适合我感受的自定义格式规则?

【问题讨论】:

我认为这一定与您的printWidth 设置有关,因为如果您超过printWidth 限制,它只会将您的属性分成多行。你可以在更漂亮的操场上进行测试:prettier.io/playground 如果你超过了printWidth,我认为你不能做任何事情来防止属性在使用 prettier 时跨越多行。 【参考方案1】:

在尝试了很多之后,我想出了以下解决方案。

    对 html 文件禁用 prettier 并使用默认格式化程序 由 VS 代码提供。 根据要求设置行长。 (一世 将其设置为 100)

这是我的 settings.json 在上述更改后的样子。


  "editor.formatOnSave": true,
  "html.format.wrapLineLength": 100,
  "prettier.disableLanguages": ["html"]

这将仅在长度大于 100 时尝试包装 HTML 属性。 好在即使长度超过100,它也不会将每个属性换行。

【讨论】:

【参考方案2】:

快速解决方法是转到 Prettier Extension Settings (ctrl + shift + X),然后在 Prettier Extension Settings 中搜索“Print Width”,将其设置为 250 或任何适合您的值。

1:转到扩展设置:

2:根据自己的喜好更改打印宽度的值。

在保存时禁用格式代码。关闭“保存时格式化”并使用Alt+Shift+F 随时格式化代码。

您可以直观地检查设置here

【讨论】:

【参考方案3】:

将此行添加到设置JSON以增加最大线宽,

  "prettier.printWidth": 160,

【讨论】:

【参考方案4】:

在位于您项目中的.prettierrc.json 中添加新规则:


    printWidth": 160,

【讨论】:

【参考方案5】:

prettierrc.json 中的"printWidth": 100 已经足够好了。

【讨论】:

【参考方案6】:

我的解决方案是 卸载 prettier !!并安装 ESLint & typeScript 扩展。它带有一个基本的格式化程序,它完全符合我的要求。 您可以通过在设置中搜索格式化程序来禁用和启用它们

【讨论】:

在尝试了各种方法并被烦了几个月之后,这救了我!感谢您发布此信息! :D【参考方案7】:

发生这种情况是因为 prettier 假设您希望代码宽度为 80 个字符只是因为它们的默认设置。

所以你应该告诉漂亮的我有太多的空间。

为此,只需在根文件夹中创建 .prettierrc.json 文件并添加


 "printWidth": 600

并保存您的文件。 这将解决您的问题。

【讨论】:

以上是关于如何在 VS 代码拆分属性中阻止 Prettier 到多行?的主要内容,如果未能解决你的问题,请参考以下文章

如何使 prettier 成为 vs 代码中的默认格式化程序?

如何让 VueJS + ESLint (Airbnb) + Prettier 一起工作? (VS代码)

如何在VS Code中启用自动格式化.jsx文件的Prettier?

VS代码/w。在 TypeScript Monorepo 中更漂亮

如何使用 Airbnb JavaScript 样式指南设置 Prettier

为啥 prettier 开始拆分短线?