Prettier 1.14: YAMLサポート
このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →
このリリースではYAMLサポート、全言語でのプラグマ(例: /** @prettier */)サポート、大規模ファイルのパフォーマンス改善を追加しました。また複数の新構文機能をサポートし、コードをさらに美しくするフォーマット調整も含まれています。✨
主な変更点
YAML
YAMLサポート (#4563, #4742, #4773, #4854 by @ikatyang)
PrettierがYAMLファイルをフォーマットできるようになりました!🎉
実装はYAML仕様に高度に準拠しており、@eemeliによる優れたyamlパッケージを基盤としています。主な特徴:
ワードラップ
Markdownと同様、ファイルの意味に影響しない場合、80文字で散文をハードラップします。
入力:
>
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim and villain by the vicissitudes of Fate. This visage, no mere veneer of vanity, is a vestige of the vox populi, now vacant, vanished. However, this valourous visitation of a bygone vexation stands vivified and has vowed to vanquish these venal and virulent vermin vanguarding vice and vouchsafing the violently vicious and voracious violation of volition! The only verdict is vengeance; a vendetta held as a votive, not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous. Verily, this vichyssoise of verbiage veers most verbose, so let me simply add that it’s my very good honour to meet you and you may call me V.
出力例: (--prose-wrap always)
>
Voilà! In view, a humble vaudevillian veteran cast vicariously as both victim
and villain by the vicissitudes of Fate. This visage, no mere veneer of
vanity, is a vestige of the vox populi, now vacant, vanished. However, this
valourous visitation of a bygone vexation stands vivified and has vowed to
vanquish these venal and virulent vermin vanguarding vice and vouchsafing the
violently vicious and voracious violation of volition! The only verdict is
vengeance; a vendetta held as a votive, not in vain, for the value and
veracity of such shall one day vindicate the vigilant and the virtuous.
Verily, this vichyssoise of verbiage veers most verbose, so let me simply add
that it’s my very good honour to meet you and you may call me V.
注:
proseWrapオプションはデフォルトでpreserveに設定されているため、この機能を有効にするにはalwaysかneverを指定する必要があります。
ファイルの一部を無視
YAMLファイルの一部をフォーマットしたくない場合、該当部分の前に無視コメントを追加できます:
# prettier-ignore
key : value
hello: world
フロントマター
YAMLフロントマターのフォーマット (#4773 by @ikatyang)
PrettierがCSSおよびMarkdownファイル内の---区切りのYAMLフロントマターをフォーマット可能に:
入力 & 出力 (Prettier 1.13):
---
key : value
---
# heading
content
出力 (Prettier 1.14):
---
key: value
---
# heading
content
プラグマ
全言語でのrequirePragma/insertPragmaサポート (#4688, #4699, #4713 by @ikatyang)
Prettier 1.7.0と1.8.0で導入された2つの新オプション:
--require-pragmaと
--insert-pragma
は一部言語のみのサポートでしたが、YAMLを含む全言語で利用可能になりました!
-
YAML
# @prettier
key: value -
CSS/Less/SCSS
/** @prettier */
.class {
display: none;
} -
GraphQL
# @prettier
query Browse($offset: Int) {
browse(offset: $offset)
} -
Vue
<!-- @prettier -->
<template>
<div>Template</div>
</template>
JavaScript
単独パラメータデコレータ以外はインライン化しない (#4830 by @suchipi)
以前はMobXの慣例に従いデコレータを常にインライン化していましたが、コミュニティからの報告によりMobXがこの慣例を採用する唯一の主要ライブラリであることが判明しました。現在Prettierはパラメータデコレータ以外を各行に分けて配置します。
// Input
@observer
class OrderLine {
@observable
price: number = 0;
@observable amount: number = 1;
foo(@required name) {
console.log(name);
}
}
// Output (Prettier 1.13)
@observer
class OrderLine {
@observable price: number = 0;
@observable amount: number = 1;
foo(@required name) {
console.log(name);
}
}
// Output (Prettier 1.14)
@observer
class OrderLine {
@observable
price: number = 0;
@observable
amount: number = 1;
foo(@required name) {
console.log(name);
}
}
JSX空白処理をfbt空白処理から分離 (#4717 by @karl)
以前は、FacebookがJSX構文を使用しながらも通常のJSXとは異なるホワイトスペース処理を行うカスタム翻訳パイプライン(fbt)を採用しているため、JSXホワイトスペースは常に保持されていました。これによりFacebookのコードベースを破壊せずにJSXホワイトスペースを変更できませんでした。Prettier 1.14ではFacebookのfbtタグを検出し、それらのホワイトスペースを他のJSXタグとは異なる方法で処理するようになり、異なる入力であっても等価な出力の一貫性が向上しました。
// Input and Output from Prettier 1.13
first = (
<div>
Text<br />
More text<br />
And more<br />
</div>
);
second = (
<div>
Text<br />More text<br />And more<br />
</div>
);
third = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);
// Output from Prettier 1.14
first = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);
second = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);
third = (
<div>
Text
<br />
More text
<br />
And more
<br />
</div>
);
タグや式を区切るテキストが単一文字の場合、可能な限りグループ全体を1行で出力します。
// Input and Output from Prettier 1.13
x = (
<div>
{hour}:{minute}:{second}
</div>
);
x = (
<div>
{hour}
:
{minute}
:
{second}
</div>
);
x = (
<div>
{hour}:
{minute}:
{second}
</div>
);
// Output from Prettier 1.14
x = (
<div>
{hour}:{minute}:{second}
</div>
);
x = (
<div>
{hour}:{minute}:{second}
</div>
);
x = (
<div>
{hour}:{minute}:{second}
</div>
);
また、以下のようなエッジケースの出力も改善されます:
// Input
this_really_should_split_across_lines =
<div>
before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
</div>
// Output (Prettier 1.13)
this_really_should_split_across_lines = (
<div>
before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{
stuff
}after
</div>
);
// Output (Prettier 1.14)
this_really_should_split_across_lines = (
<div>
before
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
{stuff}
after
</div>
);
JSX式内のアロー関数でJSXを改行 (#4601 by @duailibe)
以前のバージョンでは、JSX式内のアロー関数におけるJSXは一般的なfit-or-breakルールに従っていましたが、配列をイテレートする際の可読性が低いという問題がありました。Prettier 1.14ではこれらのアロー関数を強制的に改行させ、可読性を向上させます。
// Input
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</section>
)
// Output (Prettier 1.13)
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
</section>
);
// Output (Prettier 1.14)
const UsersList = ({ users }) => (
<section>
<h2>Users list</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</section>
);
TypeScript
TypeScript 3.0のサポート (#4625, #4757 by @ikatyang)
TypeScript 3.0で追加される新しい構文機能:unknown型とレストパラメータ/スプレッド式でのタプルをサポートします。TypeScript 3.0リリース時にこれらの機能をフォーマット可能になります。
// UnknownType
const json: unknown = JSON.parse(jsonText);
// RestType
type Foo = [string, number];
type Bar = [boolean, ...Foo];
// OptionalType
type Baz = [string, number?];
JSON
キーと値を別行に分割しない (#4852 by @ikatyang)
長い値を新しい行に配置するのはPrettierのコア機能ですが、JSONファイル内の長い文字列値を持つオブジェクトでは可読性向上に寄与しないことが判明しました。Prettier 1.14ではprint widthに収まるか否かに関わらず、オブジェクトの文字列値を移動しません。
// Input
{
"description": "a long long long long long long long long long long long long long long long long long paragraph"
}
// Output (Prettier 1.13)
{
"description":
"a long long long long long long long long long long long long long long long long long paragraph"
}
// Output (Prettier 1.14)
{
"description": "a long long long long long long long long long long long long long long long long long paragraph"
}
Markdown
リストが既に整列されている場合のみ整列を維持 (#4893 by @ikatyang)
以前はインデント体験向上とインデントされたコードブロックの誤解析回避のため常にリストを整列していましたが、順序付きリスト前の二重スペースが発生する(Markdownでは非標準の)問題がありました。Prettier 1.14では以下の場合のみリストを整列します:
-
既に整列されている場合
-
最初のリスト項目前に少なくとも2つのスペースがある場合
-
内部にインデントされたコードブロックが含まれる場合
入力:
1. 123
1. 123
---
1. 123
1. 123
---
11. 123
1. 123
---
11. 123
1. 123
---
1. 123
1. 123
出力: (Prettier 1.13)
1. 123
1. 123
---
1. 123
1. 123
---
11. 123
1. 123
---
11. 123
1. 123
---
1. 123
1. 123
出力: (Prettier 1.14)
1. 123
1. 123
---
1. 123
1. 123
---
11. 123
1. 123
---
11. 123
1. 123
---
1. 123
1. 123
パフォーマンス
大規模ファイルのパフォーマンス改善 (#4790, #4848 by @sompylasar)
Prettierのコア機能である行長超過時の折り返し処理では、すべての文字の視覚的幅を計算する必要があります。最も簡単な方法はJavaScriptのString#lengthプロパティを使用することですが、CJK文字などの非ASCII文字はラテン文字より幅が広い特性があります。回避策として、文字列長計算前にこれらの全角文字を2スペースに置換していましたが、すべてのトークンで置換処理を行うため速度低下の要因となっていました。Prettier 1.14では文字列がASCII文字のみで構成されるかチェックし、不要な置換処理を回避します。これにより大規模ファイルで20%の高速化を実現しました。
その他の変更点
API/CLI
設定ファイルでpluginsとpluginSearchDirsに相対パスをサポート (#4667 by @ikatyang)
Prettier 1.13では、プラグインの検索場所を変更する新しいオプションpluginSearchDirsを導入しました。
このオプションはCLIで指定した場合にはカレントディレクトリからの相対パスで動作していましたが、
設定ファイル内での相対パスは機能していませんでした。
Prettier 1.14では、設定ファイル内のpluginSearchDirsおよびpluginsで相対パスがサポートされるようになりました。
prettierがprettier以外の名前のディレクトリにインストールされていてもエラーを発生させない (#4706 by @asottile)
Prettier 1.13ではグローバルインストールされたプラグインをサポートするため、
prettierから最も近いnode_modulesをディレクトリツリーを遡って検索するようにしました。
当時は常にprettierディレクトリが存在することを前提としていたため、
異なる名前のディレクトリにインストールされているとPrettierがクラッシュしていました。
Prettier 1.14では検索ロジックを変更したため、
(例えばnpmにフォークを公開する場合など)必要に応じてprettierディレクトリの名前を変更できるようになりました。
ブラウザ環境でfilepathをサポート (#4721 by @ikatyang)
Prettier 1.13ではブラウザ環境での実行をファーストクラスサポートしましたが、
使用するパーサを選択する唯一の方法はparserオプション経由でした。
Prettier 1.14ではブラウザAPIでfilepathオプションをサポートし、
Node.js APIと同様にPrettierが使用するパーサを推論できるようになりました。
これは特にWebエディタアプリケーションで有用です!
プラグインにisPreviousLineEmptyを公開 (#4748 by @warrenseine)
以前はプラグインにisNextLineEmptyを公開していましたが、isPreviousLineEmptyは公開していませんでした。
Prettier 1.14ではこれを公開します。C#のディレクティブなど、一部のシナリオで有用なためです。
JavaScript
BigIntリテラルをサポート (#4697 by @ikatyang)
デフォルトのbabylonパーサでBigIntリテラルがサポートされました。
const bigInt = 1n;
throw式をサポート (#4695 by @VojtechStep)
デフォルトのbabylonパーサでthrow式がサポートされました。
const assert = x => x || throw new Error('...');
第二引数もコール式の場合、常に第一引数を展開する (#4657 by @duailibe)
以前は、引数が2つだけで第一引数が関数の場合、関数呼び出しを改行しない特別なケースがありました。
これはうまく機能していましたが、第二引数も関数の場合、見た目が良くありませんでした。
// Input
somePromise.then((args) => {
this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));
// Output (Prettier 1.13)
somePromise.then(args => {
this.props.receiveFavoritesActions(id, [].concat(...args));
}, ({ isCanceled }) => !isCanceled && logger.warn(`Error getting actions for the product: ${id}`));
// Output (Prettier 1.14)
somePromise.then(
args => {
this.props.receiveFavoritesActions(id, [].concat(...args));
},
({ isCanceled }) =>
!isCanceled && logger.warn(`Error getting actions for the product: ${id}`)
);
bind内のawaitに括弧を追加 (#4778 by @ikatyang)
以前のPrettierは実験的なbind構文内のawaitに必要な括弧を誤って削除し、
意味が変わってしまう問題がありました。Prettier 1.14では括弧を正しく維持します。
// Input
const doBothThings = async () => {
const request = doAsyncThing();
return (await request)::doSyncThing();
};
// Output (Prettier 1.13)
const doBothThings = async () => {
const request = doAsyncThing();
return await request::doSyncThing(); // means `await (request::doSyncThing)`
};
// Output (Prettier 1.14)
const doBothThings = async () => {
const request = doAsyncThing();
return (await request)::doSyncThing();
};
トップレベルでのsuperとawaitを許可 (#4823 by @ikatyang)
superとawaitはそれぞれクラス外や非同期関数外では許可されませんが、
範囲指定フォーマットオプションが関数の内容を選択した場合に正しく動作していませんでした。
Prettier 1.14ではこれらをどこでも使用できるようになりました。
super();
await doSomething();
関数合成ヒューリスティックでthisとsuperをブラックリスト化 (#4836 by @princed)
Prettier 1.13では関数合成関数(例: pipe, composeなど)のフォーマットを改善し、
パラメータを独自の行に配置するようにしましたが、
これによりクラス内で同名の関数が誤検知される問題が発生しました。
Prettier 1.14では関数合成ヒューリスティックでthisとsuperをブラックリスト化します。
// Input
class X {
x() {
this.compose(a(), b);
super.compose(a(), b);
}
}
// Output (Prettier 1.13)
class X {
x() {
this.compose(
a(),
b
);
super.compose(
a(),
b
);
}
}
// Output (Prettier 1.14)
class X {
x() {
this.compose(a(), b);
super.compose(a(), b);
}
}
TypeScript
import.meta のサポート (#4762 by @ikatyang)
Prettier 1.13 では使用していた TypeScript パーサーのバージョンが import.meta 構文の解析をサポートしていませんでした。Prettier 1.14 では TypeScript パーサーを更新したため、この構文が正しく解析・フォーマットされるようになりました。
console.log(import.meta.url);
クラス内の文字列リテラルキーを持つオプショナルプロパティ (#4762 by @ikatyang)
以前のバージョンでは、文字列リテラルをキーとするオプショナルプロパティの ? が誤って削除される問題がありました。Prettier 1.14 でこのバグを修正し、それが削除されなくなりました。
// Input
export class ClassExample {
"a-prop"?: boolean;
}
// Output (Prettier 1.13)
export class ClassExample {
"a-prop": boolean;
}
// Output (Prettier 1.14)
export class ClassExample {
"a-prop"?: boolean;
}
クラス内の複数スーパークラスに対するエラー出力 (#4762 by @ikatyang)
クラスは1つの親クラスしか持てませんが、TypeScript AST では extends 句が内部的に implements 句と同じ構造を持つため、複数の親クラスが許容されていました。以前のバージョンでは、余分なスーパークラスは出力時に黙って削除されていましたが、これがフォーマット後の混乱を招く可能性がありました。Prettier 1.14 では、これらが構文エラーとしてマークされるようになりました。
// Input
class Foo extends BarComponent, BazService, QuuxProvider {}
// Output (Prettier 1.13)
class Foo extends BarComponent {}
// Output (Prettier 1.14)
/*
SyntaxError: Classes can only extend a single class.
*/
JSX スプレッド子要素のサポート (#4885 by @ikatyang)
以前のバージョンでは、JSX 式の子要素スプレッドにおける ... が誤って削除される問題がありました。Prettier 1.14 でこの問題を修正しました。
// Input
const x = <div>{...[0]}</div>
// Output (Prettier 1.13)
const x = <div>{[0]}</div>;
// Output (Prettier 1.14)
const x = <div>{...[0]}</div>;
Flow
.js.flow 拡張子のサポート (#4777 by @ikatyang)
.js.flow は Flow 宣言ファイルの拡張子ですが、以前は認識されていませんでした。Prettier 1.14 では自動的に認識されるようになったため、設定ファイルでオーバーライドを追加する必要がなくなりました。
CSS/Less/SCSS
フロントマターとコメント間の改行を正しく処理 (#4701 by @evilebottnawi)
Prettier 1.13 では、フロントマターと CSS コメントの間にある複数の改行がスペースに置き換えられていました。Prettier 1.14 では、代わりに改行が出力されるようになりました。
/* Input */
---
key: value
---
/* comment */
.class {
display: none;
}
/* Output (Prettier 1.13) */
---
key: value
---
/* comment */
.class {
display: none;
}
/* Output (Prettier 1.14) */
---
key: value
---
/* comment */
.class {
display: none;
}
右中括弧で終わるアットルールのサポート (#4733 by @davidgomes)
以前のバージョンでは、} で終わるアットルールが正しく解析されませんでした。Prettier 1.14 ではこれらを正しく認識・フォーマットするようになりました。
/* Input */
@mixin placeholder {
&::placeholder {@content}
}
/* Output (Prettier 1.13) */
/*
SyntaxError: CssSyntaxError Unclosed block
*/
/* Output (Prettier 1.14) */
@mixin placeholder {
&::placeholder {
@content;
}
}
Markdown
メールオートリンクの維持 (#4740 by @ikatyang)
以前のバージョンではオートリンクが URL としてフォーマットされていましたが、問題ありませんでした。ただしメールリンクの場合、mailto: リンクとして解決される特別なケースがあります。Prettier 1.14 ではメールオートリンクが維持されるようになりました。
<!-- Input -->
<hello@example.com>
<!-- Output (Prettier 1.13) -->
<mailto:hello@example.com>
<!-- Output (Prettier 1.14) -->
<hello@example.com>
マークダウンコードブロック言語名後のスペースを必須としない (#4783 by @kachkaev)
Prettier 1.12 で属性付きフェンスドコードブロックのサポートを追加した際、言語名と属性を空白で区切る必要がありました。しかしこれにより、Atom でコードブロックがハイライトされるもののフォーマットされないという不整合が生じていました。Prettier 1.14 で検出ロジックを更新し、両者の動作が統一されるようになりました。
<!-- Input -->
```js{something=something}
const x = 1;
```
<!-- Output (Prettier 1.13) -->
```js{something=something}
const x = 1;
```
<!-- Output (Prettier 1.14) -->
```js{something=something}
const x = 1;
```
マークダウンコードブロックで言語エイリアスを使用したパーサー検出 (#4734 by @ikatyang)
以前はコードブロックのフォーマットに使用するパーサーを決定する際、言語の name と extensions を使用していました。しかし JSON with Comments コードブロックをフォーマットしつつシンタックスハイライトを維持することが不可能なことが判明しました。これは両者が JSON と同じ .json 拡張子を共有し、コメントのシンタックスハイライトが JSON5 でのみ利用可能なためです。Prettier 1.14 では言語の aliases を使用したパーサー検出をサポートしたため、jsonc を使用して JSON with Comments コードブロックのフォーマットとシンタックスハイライトを両立できるようになりました。
<!-- Input -->
```jsonc
// comment
{"a":1}
```
<!-- Output (Prettier 1.13) -->
```jsonc
// comment
{"a":1}
```
<!-- Output (Prettier 1.14) -->
```jsonc
// comment
{ "a": 1 }
```
U+FFFF 超えのコードポイントを持つエンコード文字のエンティティ維持 (#4832 by @ikatyang)
使用しているMarkdownパーサー(remark)はエンコードされた各文字を単一のASTノードとして解析します。これによりASTノードの値の長さが1かどうかを検出することで、元のエンコード文字を復元できます。ただし例外として、JavaScriptがUTF-16(2バイト)で文字列をエンコードするため、コードポイントが0xffffを超える文字は1文字でも長さが2になる場合があります。Prettier 1.14ではこれらの文字を正しく認識し、リテラル文字に変換されないようになりました。
<!-- Input -->
😉
<!-- Output (Prettier 1.13) -->
😉
<!-- Output (Prettier 1.14) -->
😉
Vue
Vueファイルでの範囲指定フォーマットのサポート (#4868 by @ikatyang)
以前はVueファイルで範囲指定フォーマットが利用できませんでしたが、Prettier 1.14でこの機能が追加されました。
GraphQL
非ブロック文字列値での改行の維持 (#4808 by @ikatyang)
非ブロック文字列値は単一行でのみ許可されますが、Prettier 1.13では誤ってエスケープされた\nを実際の改行に変換していました。Prettier 1.14では\nを正しく出力するようになりました。
# Input
{
foo(input: {multiline: "ab\ncd"}) { id }
}
# Output (Prettier 1.13)
{
foo(input: { multiline: "ab
cd" }) {
id
}
}
# Output (Prettier 1.14)
{
foo(input: { multiline: "ab\ncd" }) {
id
}
}
