vs 代码更漂亮 - 在 @Input() 装饰器之后添加新行

Posted 2023-02-22

【中文标题】vs 代码更漂亮 - 在 @Input() 装饰器之后添加新行

【英文标题】：vs code prettier - adds new line after @Input() decorator in angular

【发布时间】：2019-01-20 03:41:15

【问题描述】：

我已经使用 prettier 近 2 年来格式化我的 angular 代码。从上周开始，prettier 开始在所有 angular 语句后面插入一个新行，其中包含 @Input()、@Output()、@ViewChild()、..等装饰器。

导致类似

@Input()
property1

@Output()
emitter

这会使行数加倍并且不会增加可读性。

我的prettier 设置是：

  "editor.tabSize": 2,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.printWidth": 120,
  "prettier.eslintIntegration": true,

当我重置为默认设置时，这个新行的事情仍然发生。 有人有建议吗？谢谢。

【参考方案1】：

我发现了以下相关的开放功能请求： https://github.com/prettier/prettier/issues/1974

目前看来，他们没有改变行为的选项......

根据 Angular 风格指南，它应该在一行： https://angular.io/guide/styleguide#decorate-input-and-output-properties

【讨论】：

这真的很奇怪，至少在过去的一年里我一直在使用 prettier，它并没有将它们格式化成 2 行...

【参考方案2】：

当打印宽度选项是一个非常小的数字（例如：80）时，Visual Studio 代码更漂亮会在语句中的每个参数中添加一个新行。

请按照下面提到的步骤来解决代码格式中的这个问题：

在 Visual Studio 代码中转到文件 -> 首选项 -> 设置 在搜索栏中输入 Prettier。 导航到选项 更漂亮：打印宽度 在此行限制内调整代码 根据您的需要修改宽度选项，我将其设置为 800 以取回所有内容 同一行。 另外，检查js相同的行标签选项，如下图所示。

谢谢，希望对您有所帮助...