防止 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

为什么会发生这种行为：

\n

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

\n

Prettier 建议设置此选项以< 80提高可读性，\n(来源)

\n

\n

为了可读性，我们建议不要使用超过 80 个字符：

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

\nPrettier\xe2\x80\x99s printWidth 选项的工作方式不同。它不是允许的线路长度硬性上限。这是一种向 Prettier 大致表示您希望线条有多长的方式。Prettier 会制作更短和更长的线条，但通常会努力满足指定的打印宽度。

\n

\n

如何防止这种行为：

\n

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

\n

\n
• 全局停止自动换行
\n
• 本地停止自动换行
\n
• 停止特定代码组的自动换行
\n

\n\n

全局停止自动换行

\n

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

\n

1. 打开settings.json

\n

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

\n

\n

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

\n

\n

2. 设置选项settings.json

\n

将此行附加到文件末尾settings.json意味着Prettier仅当超过字符时才会换行1000（基本上永远不会）。您可以根据需要更改此数字，作为参考，默认值是80。

\n

{\n  "prettier.printWidth": 1000\n}\n

\n

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

\n\n

本地停止自动换行

\n

.prettierrc无论您的IDE如何，此方法都有效，我们可以在项目的根目录中创建一个文件，并设置printWidth为本地项目设置 。

\n

1. 创建.prettierrc文件

\n

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

\n

Linux：

\n

touch .prettierrc\n

\n

视窗：

\n

echo "" > .prettierrc\n

\n

2. 设置printWidth

\n

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

\n

touch .prettierrc\n

\n

保存文件就可以了，

\n

再次：

\n

\n

将此行附加到文件末尾.prettierc意味着Prettier仅当该行超过 1000 个字符时才会换行（基本上不会）。您可以根据需要更改此数字，作为参考，默认值是80。

\n

\n\n

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

\n

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

\n

JavaScript

\n

\n

echo "" > .prettierrc\n

\n

否则，这将被格式化为：

\n

{\n  "printWidth": 1000\n}\n

\n

\n

超文本标记语言

\n

\n

// prettier-ignore\nmatrix(\n 1, 0, 0,\n 0, 1, 0,\n 0, 0, 1\n)\n

\n

否则，这将被格式化为：

\n

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);\n

\n

\n

CSS

\n

\n

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

\n

否则，这将被格式化为：

\n

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

\n

\n

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

\n\n

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

\n