Prettier 1.17：更多引号选项与共享配置支持

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

本次更新带来了用户期待已久的对象属性引号处理灵活性，支持通过包的形式共享 Prettier 配置，新增了 LWC 解析器，添加了对新 GraphQL 语法的支持，并修复了大量格式化问题。

重要更新

JavaScript

新增对象属性引号处理选项 (#5934 by @azz)

--quote-props <as-needed|preserve|consistent>

as-needed (默认值) - 仅在必需时为对象属性添加引号（当前行为） preserve - 保留原始格式。适用于 Google Closure Compiler 高级模式用户，该模式会区别处理带引号的属性 consistent - 若对象中至少有一个属性需要引号，则为所有属性添加引号 - 类似于 ESLint 的 consistent-as-needed 选项

// Input
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (Prettier 1.16 or --quote-props=as-needed)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  origin: "prettier.io"
};

// Output (--quote-props=consistent)
const headers = {
  "accept": "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

// Output (--quote-props=preserve)
const headers = {
  accept: "application/json",
  "content-type": "application/json",
  "origin": "prettier.io"
};

配置

支持共享配置 (#5963 by @azz)

共享 Prettier 配置非常简单：发布一个导出配置对象的模块（例如 @company/prettier-config），然后在 package.json 中引用：

{
  "name": "my-cool-library",
  "version": "9000.0.1",
  "prettier": "@company/prettier-config"
}

若不想使用 package.json，可通过支持的扩展文件导出字符串配置，例如 .prettierrc.json：

"@company/prettier-config"

@azz 创建了一个示例配置包，您可在 GitHub 查看源码或通过 npm 安装。

备注

此方法不提供扩展配置以覆盖共享配置中部分属性的能力。如需此功能，请在 .prettierrc.js 文件中导入并导出修改后的配置，例如：

module.exports = {
  ...require("@company/prettier-config"),
  semi: false,
};

常规更新

JavaScript

保留参数间换行符 (#5836 by @evilebottnawi)

// Input
function foo(
  one,

  two,
  three,
  four,


  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven

) {}

// Output (Prettier 1.16)
function foo(
  one,
  two,
  three,
  four,
  five,
  six,
  seven,
  eight,
  nine,
  ten,
  eleven
) {}

// Output (Prettier 1.17)
function foo(
  one,

  two,
  three,
  four,

  five,
  six,
  seven,
  eight,
  nine,
  ten,

  eleven
) {}

修复多行动态导入注释格式 (#6025 by @noahsug)

// Input
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
)

// Output (Prettier stable)
import(/* Hello */
"something");
/* Hello */
import('myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename');

// Output (Prettier master)
import(
  /* Hello */
  'something'
  /* Hello */
)
import(
  'myreallylongdynamicallyloadedmodulenamemyreallylongdynamicallyloadedmodulename'
);

为立即调用函数和类添加括号 (#5996 by @bakkot)

// Input
new class {};
new function() {}

// Output (Prettier stable)
new class {}();
new function() {}();

// Output (Prettier master)
new (class {})();
new (function() {})();

修复可选链表达式和闭包类型转换的括号逻辑 (#5843 by @yangsu)

#4542 引入的逻辑会在错误位置打印括号，导致超过两个节点的可选链表达式或以函数调用结尾的闭包类型转换生成无效代码。

// Input
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

// Output (Prettier stable)
a(?.b[c]).c();
let value = /** @type {string} */ this(.members[0]).functionCall();

// Output (Prettier master)
(a?.b[c]).c();
let value = /** @type {string} */ (this.members[0]).functionCall();

Markdown

当表格超出行宽且设置 --prose-wrap never 时不进行列对齐 (#5701 by @chenshuai2144)

长表格在编辑器未启用自动换行时，对齐格式反而会降低可读性，因此我们在此类场景中将输出紧凑型表格。

<!-- Input -->
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

<!-- Output (Prettier stable, --prose-wrap never) -->
| Property   | Description                                                                                                           | Type    | Default |
| ---------- | --------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| bordered   | Toggles rendering of the border around the list                                                                       | boolean | false   |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string  | -       |

<!-- Output (Prettier master, --prose-wrap never) -->
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |

TypeScript

支持 readonly 运算符 (#6027 by @ikatyang)

// Input
declare const array: readonly number[];

// Output (Prettier stable)
// SyntaxError: ',' expected.

// Output (Prettier master)
declare const array: readonly number[];

HTML

新增 Lightning Web Components 支持 (#5800 by @ntotten)

通过新增名为 lwc 的解析器，支持 Lightning Web Components (LWC) 的 HTML 属性模板格式。

// Input
<my-element data-for={value}></my-element>

// Output (Prettier stable)
<my-element data-for="{value}"></my-element>

// Output (Prettier master)
<my-element data-for={value}></my-element>

Angular：避免为管道添加多余括号 (#5929 by @voithos)

在某些情况下，属性内部的管道表达式会被额外添加包裹圆括号，现在当这些括号不影响表达式结果时，将不再自动添加。

// Input
<div *ngIf="isRendered | async"></div>

// Output (Prettier stable)
<div *ngIf="(isRendered | async)"></div>

// Output (Prettier master)
<div *ngIf="isRendered | async"></div>

GraphQL

支持变量指令 (#6020 by @adek05)

Prettier 现已支持格式化变量指令。

// Input
query Q($variable: Int   @directive) {node}

// Output (Prettier stable)
query Q($variable: Int) {
  node
}

// Output (Prettier master)
query Q($variable: Int @directive) {
  node
}

支持 GraphQL 片段变量 (#6016 by @adek05)

Prettier 现已支持格式化片段变量。

// Input
fragment F($var: Int) on Type { node }

// Output (Prettier stable)
// Fails to parse

// Output (Prettier master)
fragment F($var: Int) on Type {
   node
}

CLI

自动发现作用域插件 (#5945 by @Kocal)

Prettier 现在支持自动加载命名为 @scope-name/prettier-plugin-* 的作用域插件。