vs code prettier - 在@Input（）裝飾器之后添加新行

Question

我已經使用了近2年的prettier來格式化我的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,

當我重置為默認設置時，這個新行仍然會發生。 有人有建議嗎？ 謝謝。

Answer 1

我找到了以下相關的開放功能請求： https ： //github.com/prettier/prettier/issues/1974

看起來，就目前而言，他們沒有改變行為的選擇......

根據Angular樣式指南，它應該在一行： https ： //angular.io/guide/styleguide#decorate-input-and-output-properties

Answer 2

當Print width選項是一個非常小的數字時，Visual Studio代碼更漂亮地為語句中的每個參數添加一個新行，例如：80。

請按照下面提到的步驟克服代碼格式中的此問題：

1. 在Visual Studio代碼中，轉到文件 - >首選項 - >設置
2. 在搜索欄中輸入Prettier。
3. 導航到此行限制內的Prettier：Print Width Fit代碼選項
4. 根據需要修改寬度選項，我將其設置為800以取回同一行中的所有內容。
5. 另外，檢查js相同的行標記選項，如下面的屏幕截圖所示。

謝謝希望這有助於......