Prettier 1.17: オブジェクトプロパティの引用符オプション拡張と設定共有のサポート
このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →
今回のリリースでは、長らく要望のあったオブジェクトプロパティの引用符に関する柔軟性が追加されました。またPrettier設定をパッケージ形式で共有できるようになり、LWCパーサーの追加、新しいGraphQL構文のサポート、多数のフォーマットバグ修正が行われています。
主な変更点
JavaScript
オブジェクトプロパティ引用符の挙動を変更するオプション追加 (#5934 by @azz)
--quote-props <as-needed|preserve|consistent>
as-needed (デフォルト) - 必要な場合のみオブジェクトプロパティを引用符で囲みます（現行の動作）
preserve - 入力内容を尊重します。Google Closure CompilerのAdvanced Modeユーザー向けで、引用符付きプロパティを異なる方法で扱います
consistent - オブジェクト内の少なくとも1つのプロパティに引用符が必要な場合、全てのプロパティを引用符で囲みます。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() {})();
オプショナルチェーン式とClosure型キャストの括弧ロジックを修正 (#5843 by @yangsu)
#4542で導入されたロジックにより、オプショナルチェーン式（2ノード以上）や関数呼び出しで終わるClosure型キャストで、括弧が誤った位置に挿入され無効なコードが生成される問題を修正
// 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)
HTML属性用にlwcという新規パーサーを追加し、Lightning Web Components (LWC)テンプレート形式をサポート
// 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-*形式のスコープ付きプラグインの自動ロードをサポートしました。