如何在 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 中更漂亮