防止 Prettier 在 Visual Studio 代码中将单行对象声明转换为多行？

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

Prettier 应该只在行超出您设置的打印宽度（默认为 80）时分行。

假设您使用的是 this extension, experiment with the following setting:

{
  "prettier.printWidth": 80
}

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

Answer 2

为什么会出现这种情况：

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

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

For readability we recommend against using more than 80 characters:

In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

如何防止这种行为：

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

• 全局停止自动换行
• 正在本地停止自动换行
• 停止对特定代码组的自动换行

---

全局停止自动换行

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

1. 打开settings.json

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

• 从这里输入 select：> 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
}

保存文件就可以了，

再次：

Appending this line to the end of your .prettierc file means Prettier will only wrap the line when it exceeds 1000 characters (essentially never). You can change this number to preference, for reference the default is 80.

---

停止对特定代码组的自动换行

您可以使用 prettier-ignore 注释告诉 prettier 不要格式化以下代码块，这里有一些示例来自 prettier docs for JavaScript, HTML和 CSS.

JavaScript

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

This would otherwise be formatted to:

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

HTML

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

This would otherwise be formatted to:

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

CSS

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

}

This would otherwise be formatted to:

.my ugly rule {
}

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

---

注意：.prettierrc 文件中的本地设置将覆盖 settings.json 文件中的全局设置。

Answer 3

在我的例子中，我遇到了同样的问题，在调查了 prettier-vscode 扩展的 vscode 输出选项卡之后，我发现 prettier 正在自动推断 json-stringify 解析器该特定文件，增加 printWidth 选项根本没有效果。

我的解决方案是针对该特定文件强制 json 解析器，然后我可以按预期进行格式化。

在 .prettierc 或任何你使用的 config method 中，添加 overrides 键：

        "overrides": [
            {
                "files": "yourfile.json",
                "options": { "parser": "json" }
            }
        ]