阻止Prettier在Visual Studio Code中将单行对象声明转换为多行？

Question

我安装了更漂亮的扩展，格式化后我的json对象定义现在换行了。我该如何避免呢？我想保留内联对象声明。

例如，在格式化之前：

  "properties": {
    "d0":  {"type":"boolean","default":false},
    "d1":  {"type":"boolean","default":false},
    "d2":  {"type":"boolean","default":false},
    "d3":  {"type":"boolean","default":false},
    "d4":  {"type":"boolean","default":false},
    "d5":  {"type":"boolean","default":false},
    "d6":  {"type":"boolean","default":false},
    "d7":  {"type":"boolean","default":false},
    "d8":  {"type":"boolean","default":false},
    "d9":  {"type":"boolean","default":false}
  }

格式化后：

  "properties": {
    "d0": {
      "type": "boolean",
      "default": false
    },
    "d1": {
      "type": "boolean",
      "default": false
    },
    "d2": {
      "type": "boolean",
      "default": false
    },
    "d3": {
      "type": "boolean",
      "default": false
    },
    "d4": {
      "type": "boolean",
      "default": false
    },
    "d5": {
      "type": "boolean",
      "default": false
    },
    "d6": {
      "type": "boolean",
      "default": false
    },
    "d7": {
      "type": "boolean",
      "default": false
    },
    "d8": {
      "type": "boolean",
      "default": false
    },
    "d9": {
      "type": "boolean",
      "default": false
    }
  }

Answer 1

仅当线条超出您设置的打印宽度（默认值为80）时，漂亮的线条才应断开。

假设您正在使用this extension，请尝试以下setting：

{
  "prettier.printWidth": 80
}

如果这不起作用，请仔细检查并确保没有安装可能优先的其他代码格式扩展。

Answer 2

为什么会发生这种行为：

Prettier 在 Print Width 配置选项指定的一定数量的字符后换行。
此选项可以更改，但要注意

Prettier 建议将此选项设置为 < 80 以提高可读性， (source)

<块引用>

为了便于阅读，我们建议不要使用超过 80 个字符：

在代码样式指南中，最大行长规则通常设置为 100 或 120。然而，当人类编写代码时，他们不会努力达到每一行的最大列数。开发人员经常使用空格来分隔长行以提高可读性。在实践中，平均线长度通常远低于最大值。

Prettier 的 printWidth 选项的工作方式不同。它不是硬性的允许行长度上限。这是一种向 Prettier 大致说明您希望线条有多长的方式。 Prettier 会制作更短和更长的线条，但一般会努力满足指定的 printWidth。

如何防止这种行为：

我将介绍一些可以停止自动换行的方法：

• 在全局范围内停止自动换行
• 在本地停止自动换行
• 停止对特定代码组进行自动包装

---

全局停止自动换行

如果您使用 Visual Studio Code 编辑器和 esbenp.prettier-vscode 扩展名，停止自动包装所需要做的就是修改您的全局 settings.json 文件。这些是您需要遵循的步骤。

1. 打开 settings.json

• 使用 Ctrl+Shift+P 打开命令面板。

• 从这里输入并选择：> Preferences: Open Settings (JSON)

2.在settings.json

中设置选项

将此行附加到 settings.json 文件的末尾意味着 Prettier 只会在超过 1000 个字符时换行（基本上永远不会）。您可以将此数字更改为首选项，以供参考，默认值为 80。

{
  "prettier.printWidth": 1000
}

只需确保保存对文件的更改即可完成！

---

在本地停止自动换行

此方法适用于您的 IDE，我们可以在项目的根目录中创建一个 .prettierrc 文件，并为我们的本地项目设置 printWidth。

1. 创建 .prettierrc 文件

某些较旧的操作系统可能会尝试阻止您创建仅限扩展名的文件。因此，当您在项目的根目录中时，您可以使用此命令来创建您的文件。

Linux：

touch .prettierrc

Windows：

echo "" > .prettierrc

2. 设置 printWidth

将这些行添加到您的 .prettierrc 文件中。

{
  "printWidth": 1000
}

保存文件，你就可以开始了，

再说一遍：

<块引用>

将此行附加到 .prettierc 文件的末尾意味着 Prettier 只会在超过 1000 个字符时换行（基本上从不换行）。您可以将此数字更改为首选项，以供参考，默认值为 80。

---

停止对特定代码组的自动包装

您可以使用 prettier-ignore 注释告诉 prettier 不要格式化以下代码块，以下是 JavaScript、HTML 和 {prettier docs} 中的一些示例{1}}。

JavaScript

<块引用>

CSS

否则会被格式化为：

// prettier-ignore
matrix(
 1, 0, 0,
 0, 1, 0,
 0, 0, 1
)

HTML

<块引用>

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

否则会被格式化为：

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

CSS

<块引用>

<div class="x">hello world</div>

否则会被格式化为：

/* prettier-ignore */
.my    ugly rule
{

}

您可以查看特定于语言的忽略字符串 here 的完整列表，以及用于忽略文件特定范围的选项。

---

注意：.my ugly rule { } 文件中的本地设置将覆盖 .prettierrc 文件中的全局设置。