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

Question

我已经使用 prettier 将近 2 年来格式化我的 angular 代码。从上周开始 prettier 开始在所有带有 @Input()、@Output()、@ViewChild()、..

等装饰器的 angular 语句后面插入一个新行

结果类似

@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,

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

Answer 1

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

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

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

Answer 2

Visual Studio 当 Print width 选项是一个非常小的数字时，code prettier 会为语句中的每个参数添加一个新行，例如：80。

请按照以下步骤解决代码格式问题：

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

谢谢希望这对你有帮助...

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

vs code prettier - adds new line after @Input() decorator in angular

formatting

visual-studio-code

prettier