配置 prettier 以在新行上推送花括号并且不清除空行

Posted

技术标签:

【中文标题】配置 prettier 以在新行上推送花括号并且不清除空行【英文标题】:configure prettier to push curly braces on new lines & not clear empty lines 【发布时间】:2020-07-09 22:07:59 【问题描述】:

我在 VSCode 中使用 prettier,如何配置它以像这样格式化我的代码:

function test() 


   if() 
      

         MYCODE GOES HERE;

      


我希望 在新行上,在 之后和 之前有一个空行。

目前,如果条件或函数名称,它将大括号移动到相同的行,并删除之后/之前的空行。

【问题讨论】:

【参考方案1】:

Prettier 被认为是一个“固执己见”的格式化程序,这意味着它不允许你选择这样的东西。如果您想更好地控制格式,您可以使用不同的格式化程序。

内置的 VS 代码格式化程序允许您做您想要的,只需搜索“function new line”和类似选项的设置。

当然,VS 代码市场中还有许多其他可用的格式扩展。无论您选择哪种方式,您都必须在 VS 代码设置中选择它具有您的默认格式化程序。

【讨论】:

【参考方案2】:

现在有一个名为Glimmer 的解析器支持Handlebars。像这样使用它:

yarn prettier '**/*.hbs' --parser glimmer

此外,请查看名为 Prettier for Handlebars 的 VSCode 扩展。

【讨论】:

【参考方案3】:

正如in this answer 所提到的,VS Code 的格式化程序本身运行良好,但如果您希望它成为工作流程的一部分,那么使用 ESLint 可能会使事情变得更容易。有一条规则叫做brace-style

然后您可以运行eslint ./path/to/your/file --fix 来格式化您的代码,或者运行eslint . --fix 来格式化整个项目目录中的代码。

免责声明:我大部分时间都使用 ESLint 进行代码格式化,它对我有用。我实际上也用它来查找和修复问题,所以这就像用一块石头杀死两只鸟,但请注意,ESLint 更多的是在代码中查找问题并修复它们,因此仅将 ESLint 用于代码格式化可能不是最好的主意。

【讨论】:

以上是关于配置 prettier 以在新行上推送花括号并且不清除空行的主要内容,如果未能解决你的问题,请参考以下文章

强制 Prettier 将内部文本放在新行上,不带尾随 >

可以让 Prettier 允许在新行上链接函数吗?

在 Prettier 中,如何防止 HTML 结束标记的“>”字符被放置在新行上?

如何在使用 prettier 的类中的方法声明前后添加新行?

在 React Typescript 中配置更漂亮的空格

Eslint 在大括号之间添加了不必要的空格,Prettier 显示错误