12

我安装了更漂亮的扩展，我的 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
    }
  }
4

2 回答 2

4

为什么会发生这种行为：

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

Prettier 建议设置此选项以< 80提高可读性，（来源）

为了便于阅读，我们建议不要使用超过 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

视窗：

echo "" > .prettierrc
2. 设置printWidth

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

{
  "printWidth": 1000
}

保存文件，你很高兴，

再次：

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

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

您可以使用prettier-ignore注释告诉 prettier 不要格式化以下代码块，以下是prettier 文档中的一些示例，用于JavaScript,HTML和CSS.

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

否则，这将被格式化为：

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
HTML
<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

否则，这将被格式化为：

<div class="x">hello world</div>
CSS
/* prettier-ignore */
.my    ugly rule
{

}

否则，这将被格式化为：

.my ugly rule {
}

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

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

于 2021-08-11T23:17:03.080 回答
1

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

假设您正在使用此扩展程序，请尝试以下设置：

{
  "prettier.printWidth": 80
}

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

于 2018-08-24T16:25:05.837 回答