Prettier 1.15: HTML、Vue、AngularおよびMDXのサポート
このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →
このリリースではHTML、Vue、AngularおよびMDXのサポートが追加されました。 またデコレータの位置を尊重するオプション、 JSXシングルクォートのオプション、 shebangによるパーサの自動判定機能が追加され、 いくつかの新構文のサポートとフォーマットの微調整が行われています。
主な変更点
HTML/Vue/Angular
HTML、Vue、Angularのサポート (#5259 by @ikatyang, #4753 by @evilebottnawi, #2083 by @azz)
PrettierがHTML、Vue、Angularファイルをフォーマット可能になりました! 🎉
HTMLおよびHTMLテンプレートファイルのパースにはAngularから抽出されたHTMLパーサangular-html-parserを使用しているため、 AngularチームのおかげでHTML仕様への高い互換性が実現されています。
主なハイライト:
空白を考慮したフォーマット
日常的なHTML作業でお気づきのように、以下の2つのケースは同じ出力を生成しません:
| html | output | |
|---|---|---|
| with spaces | 1<b> 2 </b>3 | 1 2 3 |
| without spaces | 1<b>2</b>3 | 123 |
これはインライン要素において空白が意味を持つため発生します。
このため、次のような安全でないフォーマットは行えません:
<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>
を次のように変換することは
<a href="https://prettier.io/">
Prettier is an opinionated code formatter.
</a>
ブラウザでの表示結果を変更する可能性があるためです。
コードを破壊したり何もしない代わりに、_空白を考慮したフォーマット_を導入しました。これは:
-
各要素のデフォルトCSS
display値に従って内部の空白が意味を持つかどうかを判定し -
重要な空白の追加/削除を避ける方法でタグをラップします
例:
<!-- <span> is an inline element, <div> is a block element -->
<!-- input -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto at">Architecto rerum architecto incidunt sint.</div>
<!-- output -->
<span class="dolorum atque aspernatur"
>Est molestiae sunt facilis qui rem.</span
>
<div class="voluptatem architecto at">
Architecto rerum architecto incidunt sint.
</div>
またCSS表示が変更される可能性があるため、
マジックコメント(例: <!-- display: block -->)でPrettierに要素のフォーマット方法を指示できます:
<!-- input -->
<!-- display: block -->
<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<!-- output -->
<!-- display: block -->
<span class="dolorum atque aspernatur">
Est molestiae sunt facilis qui rem.
</span>
さらに、最大限の安全性が必要な場合や空白を気にしない場合のために、 グローバルな空白の扱い方を設定するオプションも追加されました:
--html-whitespace-sensitivity (デフォルトはcss)
-
css- CSSdisplayプロパティのデフォルト値を尊重 -
strict- すべての空白を意味ありとみなす -
ignore- すべての空白を意味なしとみなす
パーサの自動判定
Prettierはファイル名から使用するパーサを推測します。HTML、Vue、Angularのデフォルトパターンは次の通りです:
-
*.html:--parser html -
*.component.html:--parser angular -
*.vue:--parser vue
特にAngularユーザーは、ファイル名が正しいパーサと一致することを確認してください。 一致しない場合は、overridesフィールドで使用するパーサを手動で指定する必要があります。
なお--parser htmlではフレームワーク固有のフォーマットは適用されません。
JavaScript内のHTMLテンプレートリテラル
このリリースではhtmlテンプレートタグ(またはHTMLを含む「タグ」コメント)のサポートも追加されました:
-
html`code` -
/* HTML */ `code`
// input
const foo = html`<div class="voluptatem architecto at">Architecto rerum ${interpolation} architecto incidunt sint.</div>`;
// output
const foo = html`
<div class="voluptatem architecto at">
Architecto rerum ${interpolation} architecto incidunt sint.
</div>
`;
Vueのフォーマット
以下のVue固有の構文構造がサポートされています:
-
インターポレーション
{{ something }}
-
属性
v-something:something@somethingv-forslot-scope
Angularのフォーマット
以下のAngular固有の構文構造をサポートします:
-
インターポレーション
{{ something }}
-
属性
(something)[something][(something)]*something
-
インラインテンプレート
@Component({ template: `<div>Hello World</div>` })
MDX
MDXのサポート (#4975 by @ikatyang)
MDXはJSXを使用してドキュメントを構築できるMarkdown拡張です。Prettierでフォーマットできるようになり、MarkdownとJSの両方の部分をフォーマットします!
<!-- Input -->
import {
colors } from
'./theme'
import Palette from './components/palette'
# Colors
<Palette colors={
colors}
/>
<!-- Output -->
import { colors } from "./theme";
import Palette from "./components/palette";
# Colors
<Palette colors={colors} />
JavaScript
ネストされた三項演算子のelseブランチをフラット化 (#5039 by @suchipi, #5272 by @duailibe, #5333 by @ikatyang)
以前はネストされた三項演算子は常にインデントされ、深いネストではインデントレベルが増加していました。この問題を解決するため、if..else if..elseブロックのフォーマットに似た方法で、ネストされた三項演算子のelseブランチをフラット化します。
// Input
const example1 =
someValue === 'a' ? 'hello world, branch a'
: someValue === 'b' ? 'hello world, branch a && b'
: someValue === 'c' ? 'hello world, branch a && b && c'
: someValue === 'd' ? 'hello world, branch a && b && c && d'
: null;
const example2 =
someValue === 'a'
? someValue === 'b'
? someValue === 'c'
? 'hello world, branch a && b && c'
: 'hello world, branch a && b && !c'
: 'hello world, branch a && !b'
: null;
// Output (Prettier 1.14)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;
const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;
// Output (Prettier 1.15)
const example1 =
someValue === "a"
? "hello world, branch a"
: someValue === "b"
? "hello world, branch a && b"
: someValue === "c"
? "hello world, branch a && b && c"
: someValue === "d"
? "hello world, branch a && b && c && d"
: null;
const example2 =
someValue === "a"
? someValue === "b"
? someValue === "c"
? "hello world, branch a && b && c"
: "hello world, branch a && b && !c"
: "hello world, branch a && !b"
: null;
インラインで記述されたデコレータはインラインのまま維持 (#5188 by @duailibe)
Prettier 1.14以前は、デコレータは常にデコレート対象と同じ行に配置していました。
このフォーマットが理想的でないというユーザーフィードバックを受け、Prettier 1.14ではデコレータを常に別行に配置するように変更しました。
しかし、すべてのケースでこのフォーマットが理想的でないという別のユーザーフィードバックも受けました。
可能な限り一貫したフォーマットを提供するため、デコレータを同じ行に配置するか別行にするかを決定するヒューリスティックを検討しました。
しかし、#4924での長い議論の後、どれをインライン化すべきかの信頼できる判定方法はないと結論付けました。そのためPrettier 1.15では、ユーザーが記述した元のスタイルを尊重することにしました。デコレータとデコレート対象の間に改行があれば改行を挿入し、なければ挿入しません。
// Input
class Hello {
@decorator inline = 'value';
@decorator
ownLine = 'value';
@decorator({
hello: 'world'
}) multiLine = 'value';
}
// Output (Prettier 1.14)
class Hello {
@decorator
inline = "value";
@decorator
ownLine = "value";
@decorator({
hello: "world"
})
multiLine = "value";
}
// Output (Prettier 1.15)
class Hello {
@decorator inline = "value";
@decorator
ownLine = "value";
@decorator({
hello: "world"
})
multiLine = "value";
}
元のデコレータ順序を尊重 (#5207 by @duailibe)
デコレータはまだ公式ECMA標準の一部ではなく、エクスポートされたクラスのデコレータ配置位置は未決定の問題です。提案作成者がフィードバックを得られるよう、Babel 7はエクスポートクラスの前後両方のデコレータをサポートしました。Prettier 1.15はこれらをサポートし、デコレータの配置位置を尊重します。(仕様が標準化されたら、ユーザー入力を尊重せず一貫したフォーマットに変更します。)
// decorator before export
@decorator export class Bar {}
// decorator after export
export @decorator class Foo {}
オブジェクト改行ヒューリスティックの改善 (#5205 by @j-f1)
以前は、オブジェクトが印刷幅に収まらない場合、Prettierは自動的に複数行に分割していました。また入力コードでオブジェクト内に改行がある場合、複数行のまま維持していました。これによりオブジェクトを1行に折りたたむのが困難でした。Prettierが排除しようとする手動フォーマット変更を減らすため、{と最初のキーの間の改行のみをチェックする動作に変更しました:
// Input
const data = { foo: 'bar',
baz: 'quux'
}
/* You’d get this format by deleting the newline after the `{` */
// Output (Prettier 1.14)
const data = {
foo: 'bar',
baz: 'quux'
}
// Output (Prettier 1.15)
const data = { foo: 'bar', baz: 'quux' }
JSX
JSXでシングルクォートを使用するオプション (#4798 by @smirea)
コミュニティからの[多大な要望]を受け、Prettier 1.15ではJSXでシングルクォートを使用するオプション--jsx-single-quote(設定ファイルやAPIではjsxSingleQuote)を追加しました。
// with --jsx-single-quote
<div class='hello'>world</div>
// without --jsx-single-quote
<div class="hello">world</div>
JSXテキストを正しく分割 (#5006 by @yuliaHope)
Prettier 1.14ではJSX内で不幸な改行が発生する不具合がありましたが、これらのケースは修正されました。
// Input
<div>
Sales tax estimated using a rate of {salesTax * 100}%.
</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}'s profile
</Link>;
// Output (Prettier 1.14)
<div>
Sales tax estimated using a rate of {salesTax * 100}
%.
</div>;
<BasicText light>
(avg. {value}
/5)
</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}
's profile
</Link>;
// Output (Prettier 1.15)
<div>Sales tax estimated using a rate of {salesTax * 100}%.</div>;
<BasicText light>(avg. {value}/5)</BasicText>;
<Link to={orgURL(this.props.org.name)}>
Go to {this.props.org.name}'s profile
</Link>;
Flow
inexactのサポート (#5304 by @jbrown215, #5356 by @existentialism)
Flowチームは将来的に全てのオブジェクト型をデフォルトで_exact_として扱う予定です。そのため、オブジェクト型がinexactであることを示す新構文が導入されました。Prettier 1.15ではこの構文をサポートします。
type T = {
a: number,
...
}
Flowのタイプキャストコメントを改行しないように修正 (#5280, #5290 by @swac)
以前はFlowのタイプキャストコメントを囲む括弧が削除されるケースがあり、Flowのコメント構文が壊れる問題がありました。この問題はPrettier 1.15で修正されました。
// Input
(obj /*: Class */).property
// Output (Prettier 1.14)
obj /*: Class */.property;
// Output (Prettier 1.15)
(obj /*: Class */).property;
Markdown
数式構文の保持 (#5050, #5220 by @ikatyang)
以前はremark-mathの構文構造の一部が通常テキストとして扱われ破壊される問題がありました。Prettier 1.15では数式構文が安全に保持されるようになりました。
$inline-math$
$$
block-math
$$
その他の変更点
API/CLI
拡張子がないファイル名の場合、シバンからパーサーを推論 (#5149 by @haggholm)
以前はファイル名と拡張子からパーサーを推論していましたが、CLIスクリプトには拡張子がないことが多く、ユーザーが手動でパーサーを指定する必要がありました。Prettier 1.15では拡張子がないファイルをフォーマットする際、ファイルの先頭行にシバンがある場合、それを基に使用するパーサーを推論します。
# Input
$ cat bin/example
#!/usr/bin/env node
require ( "../src/cli" ) . run ( )
$ prettier bin/example
# Output (Prettier 1.14)
[error] No parser could be inferred for file: bin/example
# Output (Prettier 1.15)
#!/usr/bin/env node
require("../src/cli").run();
現在行の空白をトリムする新しいtrimコマンド追加 (#4772 by @warrenseine)
以前のプラグインAPIには現在行のインデントを削除する方法がありませんでした。同等の処理を実現する回避策は存在しましたが信頼性に欠けていたため、信頼性の高い方法で空白をトリムする新しいtrimコマンドを導入しました。
カラフルな検証メッセージ (#5020, #5057 by @ikatyang)
以前はオプション検証エラーメッセージに色付けがなく、どのオプションに無効な値が渡されたのか、有効な値は何かが分かりにくい問題がありました。Prettier 1.15では一目で状況を把握できるよう改善されました。
# Input
$ prettier filename.js --trailing-comma wow
# Output (Prettier 1.14)
[error] Invalid ``--trailing-comma`` value. Expected "all", "es5" or "none", but received `"wow"`.
# Output (Prettier 1.15)
[error] Invalid --trailing-comma value. Expected "all", "es5" or "none", but received "wow".
プリンターによるASTの前処理を許可 (#5041 by @ikatyang)
印刷を容易にするためASTを変換する必要がある場合があります。以前はパーサー内でこの処理を行っていましたが、これにより内部実装が外部ユーザーに公開され、カスタムパーサー構築を試みるユーザーにとって理想的ではありませんでした。Prettier 1.15ではAPIの内部実装を公開せずにprinter.preprocessでASTを前処理できるようになりました。
interface Printer {
preprocess(ast: AST, options: object): AST;
}
サポート外設定フォーマットのエラーメッセージ改善 (#4969 by @ikatyang)
以前は、サポート対象外の形式の設定ファイルを読み込むと、Prettierのバグのように見えるエラーメッセージが表示されていましたが、 Prettier 1.15でこのメッセージが改善されました。
# Input
$ prettier filename.js --config .prettierrc.wow
# Output (Prettier 1.14)
[error] Invalid configuration file: Cannot read property 'sync' of undefined
# Output (Prettier 1.15)
[error] Invalid configuration file: No sync loader specified for extension ".wow"
改行コードを強制するオプションの追加 (#5327 by @kachkaev)
以前はPrettierは常に元の改行コードを維持していましたが、これは多くの場合問題ありません。
ただし、異なるOSのユーザーが共同でプロジェクトに取り組む場合、
中央のGitリポジトリで改行コードが混在しやすく、大きな差分が発生する可能性があります。
Prettier 1.15では--end-of-line <auto|lf|crlf|cr>オプションを追加し、この改行コード問題に対応できるようになりました。
JavaScript
シングルスターコメントをJSDocとして扱う (#5206 by @j-f1, #5330 by @lydell)
最初の行に単一の*のみがあるJSDoc形式のコメント(/*と/**の違い)について、
Prettierはインデントが変更された際に適切にインデントするようになりました:
// Input
if (true) {
/*
* Oh no
*/
}
// Output (Prettier 1.14)
if (true) {
/*
* Oh no
*/
}
// Output (Prettier 1.15)
if (true) {
/*
* Oh no
*/
}
指数演算と剰余演算が混在する場合のカッコ修正 (#5243 by @bakkot)
以前は指数演算と剰余演算が混在する場合にカッコが誤って削除されていましたが、 Prettier 1.15でこの問題を修正しました。
// Input
const val = (n % 10) ** 2
// Output (Prettier 1.14)
const val = n % 10 ** 2;
// Output (Prettier 1.15)
const val = (n % 10) ** 2;
try..finally内のコメントを正しく出力 (#5252 by @aquibm)
以前のバージョンでは、try-finally文内の一部のコメントが誤った順序で出力される問題がありました。
Prettierはこれらを正しい順序で出力するようになりました。
// Input
// comment 1
try {
// comment 2
}
// comment 3
finally // comment 4
{
// comment 5
}
// Output (Prettier 1.14)
// comment 1
try {
// comment 2
} finally { // comment 4
// comment 3
// comment 5
}
// Output (Prettier 1.15)
// comment 1
try {
// comment 2
} finally {
// comment 3
// comment 4
// comment 5
}
catch節内のコメントを適切な位置に出力 (#5202 by @duailibe)
catch節内のコメントが、他の節と同様に専用行に出力されるようになりました。
// Input
try {} catch (
// comment
e
) {}
// Output (Prettier 1.14)
try {
} catch (// comment
e) {}
// Output (Prettier 1.15)
try {
} catch (
// comment
e
) {}
本体が条件式のアロー関数をインライン化 (#5209 by @duailibe)
本体が条件式のアロー関数を関数呼び出しの引数として扱う場合、 余分なインデントレベルを追加する必要はありません。 Prettier 1.15ではこれらをインライン化するようになりました。
// Input
x.then(() => a ?
veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong:
veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);
// Output (Prettier 1.14)
x.then(
() =>
a
? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
: veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);
// Output (Prettier 1.15)
x.then(() =>
a
? veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
: veryVerVeryveryVerVeryveryVerVeryveryVerVeryLong
);
コメントによる変数宣言子の予期せぬインデントを修正 (#5190 by @duailibe)
以前のバージョンでは、変数宣言内のコメントが原因で変数宣言子がインデントなしで出力される問題がありましたが、 Prettier 1.15で修正されました。
// Input
const // Comment
a = 1;
// Output (Prettier 1.14)
const // Comment
a = 1;
// Output (Prettier 1.15)
const // Comment
a = 1;
オプショナルチェーン内の三項演算子のカッコを削除しない (#5179 by @existentialism)
Prettier 1.14では、オプショナルメンバー式(?.)内に三項演算子が現れた場合に誤ってカッコを削除していました。
Prettier 1.15ではこれらのケースを正しく出力します。
// Input
(a ? b : c)?.d;
// Output (Prettier 1.14)
a ? b : c?.d;
// Output (Prettier 1.15)
(a ? b : c)?.d;
GraphQLタグ内のバッククォートと${のエスケープ処理 (#5137 by @lydell)
以前は埋め込みGraphQL内でインターポレーション風の文字列が誤ってエスケープ解除され、 JavaScriptがこれをインターポレーションとして扱う問題がありました。Prettier 1.15では正しくエスケープされます。
// Input
const schema = gql`
type Project {
"Pattern: \`\${project}\`"
pattern: String
}
`;
// Output (Prettier 1.14)
const schema = gql`
type Project {
"Pattern: \`${project}\`"
pattern: String
}
`;
// Output (Prettier 1.15)
const schema = gql`
type Project {
"Pattern: \`\${project}\`"
pattern: String
}
`;
ES5非互換キーのクォート除去を停止 (#5157 by @koba04)
以前のPrettierは、ES2015で不要な場合にキーのクォートを除去していましたが、 これにより出力がES5と互換性がなくなる問題がありました。 Prettier 1.15ではES5で不要な場合にのみクォートを除去するようになりました。
// Input
var obj = {
"𐊧": 'ok',
𐊧: 'ok'
};
// Output (Prettier 1.14)
var obj = {
𐊧: "ok",
𐊧: "ok"
};
// Output (Prettier 1.15)
var obj = {
"𐊧": "ok",
𐊧: "ok"
};
第二引数が三項演算子の場合の引数ハギングを停止 (#5151 by @onurtemizkan)
第一引数が関数で第二引数が複雑な式ではない場合、関数呼び出しの引数を「ハグ」する特別なケースがありましたが、 三項演算子を非複雑な式とみなしていました。実際には複雑になり得るため、 Prettier 1.15でこの動作を変更しました。
// Input
func(
() => { thing(); },
something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0)
);
// Output (Prettier 1.14)
func(() => {
thing();
}, something(longArgumentName, anotherLongArgumentName) ? someOtherThing() : somethingElse(true, 0));
// Output (Prettier 1.15)
func(
() => {
thing();
},
something(longArgumentName, anotherLongArgumentName)
? someOtherThing()
: somethingElse(true, 0)
);
テスト関数への数値形式タイムアウト指定のサポート追加 (#5085 by @j-f1)
タイムアウト値(数値)が第3引数として渡された場合、テスト関数に対するPrettierの特別な書式設定が維持されるようになりました:
// Input
it('Handles at least 10k untracked files without failing', async () => {
hello()
}, 25000)
// Output (Prettier 1.14)
it(
"Handles at least 10k untracked files without failing",
async () => {
hello();
},
25000
);
// Output (Prettier 1.15)
it('Handles at least 10k untracked files without failing', async () => {
hello()
}, 25000)
beforeEach形式の呼び出しを通常の関数呼び出しとしてフォーマット (#5011 by @ericsakmar)
以前はbeforeEachの引数が不適切に詰められていましたが、Prettier 1.15でこの問題を修正しました。
// Input
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done()),
);
// Output (Prettier 1.14)
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done()));
// Output (Prettier 1.15)
beforeEach(done =>
startService()
.pipe(tap(service => (instance = service)))
.subscribe(() => done())
);
パイプライン演算子の先行コメントを独立行に出力 (#5015 by @flxwu)
Prettier 1.14ではパイプライン演算子の前にあるコメントが右引数のインデント消失を引き起こしていましたが、この問題はPrettier 1.15で修正されました。
// Input
function pipeline() {
0
// Comment
|> x
}
// Output (Prettier 1.14)
function pipeline() {
0
|> // Comment
x;
}
// Output (Prettier 1.15)
function pipeline() {
0 |>
// Comment
x;
}
new式内の宙ぶらりんコメントを維持 (#5017 by @flxwu)
new呼び出しで式の代わりにコメントを渡した場合、括弧外に引き出されずに保持されるようになりました。
// Input
new Thing(/* comment */)
// Output (Prettier 1.14)
new Thing /* comment */();
// Output (Prettier 1.15)
new Thing(/* comment */);
bind式の冗長なASI保護を削除 (#4970 by @TitanSnow)
--no-semiオプション使用時、bind式に対する不要なセミコロンがPrettier 1.15で削除されます。
// Input
a::b.c
// Output (Prettier 1.14)
;a::b.c
// Output (Prettier 1.15)
a::b.c
bind式で必要な括弧を削除しない (#4964 by @TitanSnow)
bind式で必要な括弧がPrettier 1.15で維持されるようになりました。
// Input
a::(b.c());
// Output (Prettier 1.14)
a::b.c();
// Output (Prettier 1.15)
a::(b.c());
関数呼び出し内三項演算子のインデントを修正 (#4368 by @malcolmsgroves)
関数呼び出し内の三項演算子に含まれる論理式が正しくインデントされるようになりました。
// Input
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);
// Output (Prettier 1.14)
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);
// Output (Prettier 1.15)
fn(
bifornCringerMoshedPerplexSawder,
askTrovenaBeenaDependsRowans,
glimseGlyphsHazardNoopsTieTie === averredBathersBoxroomBuggyNurl &&
anodyneCondosMalateOverateRetinol // <--
? annularCooeedSplicesWalksWayWay
: kochabCooieGameOnOboleUnweave
);
import内のコメントを移動しない (#5016 by @ericsakmar)
import内のコメントがimport出力から移動されなくなりました。
// Input
import x, {
// comment
y
} from 'z';
// Output (Prettier 1.14)
import x, { y } from "z";
// comment
// Output (Prettier 1.15)
import x, {
// comment
y
} from "z";
whileコメントの不安定なフォーマットを修正 (#5251 by @jaideng123)
while内のコメントが正しくフォーマットされるようになり、安定した出力を得るために二度フォーマットする必要がなくなりました。
// Input
while(
true
// Comment
) {}
// First Output (Prettier 1.14)
while (true) // Comment
{}
// Second Output (Prettier 1.14)
while (
true // Comment
) {}
// First & Second Output (Prettier 1.15)
while (
true
// Comment
) {}
関数宣言と本体間のコメントを安定出力 (#5250 by @jaideng123)
関数宣言と本体の間にあるコメントが最終結果を得るために二度フォーマットする必要がなくなりました。
// Input
function foo() // this is a function
{
return 42
}
// First Output (Prettier 1.14)
function foo() { // this is a function
return 42;
}
// Second Output (Prettier 1.14)
function foo() {
// this is a function
return 42;
}
// First & Second Output (Prettier 1.15)
function foo() {
// this is a function
return 42;
}
JSX
JSX内の論理式チェインを改行しない (#5092 by @duailibe)
JSX内の論理式チェインに対する不要なインデントが防止されるようになりました。
// Input
const TestComponent = () => {
return (
<>
{cats && memes && (
<Foo bar><Trololol /></Foo>
)}
</>
);
}
// Output (Prettier 1.14)
const TestComponent = () => {
return (
<>
{cats &&
memes && (
<Foo bar>
<Trololol />
</Foo>
)}
</>
);
};
// Output (Prettier 1.15)
const TestComponent = () => {
return (
<>
{cats && memes && (
<Foo bar>
<Trololol />
</Foo>
)}
</>
);
};
ノーブレークスペースを通常スペースに変更しない (#5165 by @vjeux, #5334 by @ikatyang)
以前はノーブレークスペースが通常のスペースとして扱われ、置換されていましたが、この問題はPrettier 1.15で修正されました。
(·はノーブレークスペースを表します)
// Input
function OhMyWhitespace() {
return (
<Dialog>
<p>
Supprimer l’objectif «·{goal.name}·»·?
</p>
</Dialog>
)
}
// Output (Prettier 1.14)
function OhMyWhitespace() {
return (
<Dialog>
<p>
Supprimer l’objectif «
{goal.name}
·»·?
</p>
</Dialog>
);
}
// Output (Prettier 1.15)
function OhMyWhitespace() {
return (
<Dialog>
<p>Supprimer l’objectif «·{goal.name}·»·?</p>
</Dialog>
);
}
単純なJSX開始タグを改行しない (#5078 by @duailibe)
単純なJSX開始タグが複数行に分割されなくなりました。
// Input
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}
// Output (Prettier 1.14)
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText
>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}
// Output (Prettier 1.15)
function HelloWorld() {
const listItemText = (
<ListItemText
primary={
<PrimaryText>{`Two Factor Authentication is ${enabledText}`}</PrimaryText>
}
/>
);
}
JSX式内アロー関数の後退バグを修正 (#5063 by @ikatyang)
// Input
<div className="search-filter-chips">
{scopes.filter(scope => scope.value !== "").map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;
// Output (Prettier 1.14)
<div className="search-filter-chips">
{scopes.filter(scope => scope.value !== "").map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;
// Output (Prettier 1.15)
<div className="search-filter-chips">
{scopes
.filter(scope => scope.value !== "")
.map((scope, i) => (
<FilterChip
query={this.props.query}
onFilterChosen={this.onSearchScopeClicked}
/>
))}
</div>;
Flow
単一識別子のジェネリックをインライン化 (#5066 by @duailibe)
単一識別子のジェネリックが常にインライン化されるようになりました。
// Input
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();
// Output (Prettier 1.14)
const longVariableName: Array<
number
> = this.foo.bar.baz.collider.body.vertices.reduce();
// Output (Prettier 1.15)
const longVariableName: Array<number> = this.foo.bar.baz.collider.body.vertices.reduce();
extends内クラスの常時インライン化を停止 (#5244 by @aquibm)
extends内のクラスが正しく複数行に分割されるようになりました。
// Input
declare interface ExtendsMany extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
x: string;
}
// Output (Prettier 1.14)
declare interface ExtendsMany
extends Interface1, Interface2, Interface3, Interface4, Interface5, Interface6, Interface7 {
x: string;
}
// Output (Prettier 1.15)
declare interface ExtendsMany
extends Interface1,
Interface2,
Interface3,
Interface4,
Interface5,
Interface6,
Interface7 {
x: string;
}
export default内非同期関数に不要な括弧を追加しない (#5303 by @jbrown215)
export default async function周囲の不要な括弧が削除されるようになりました。この問題はflowパーサ使用時のみ発生していました。
// Input
export default async function foo() {};
// Output (Prettier 1.14)
export default (async function foo() {});
// Output (Prettier 1.15)
export default async function foo() {}
TypeScript
非nullアサーションのASI保護を追加 (#5262 by @duailibe)
--no-semiモードでも、非nullアサーションに必要なセミコロンが削除されなくなりました。
// Input
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = 'pointer'
// Output (Prettier 1.14)
const el = ReactDOM.findDOMNode(ref)
(el as HTMLElement)!.style.cursor = "pointer"
// Output (Prettier 1.15)
const el = ReactDOM.findDOMNode(ref)
;(el as HTMLElement)!.style.cursor = "pointer"
prettier-ignore使用時のメソッドシグネチャで余分なセミコロンを追加しない (#5160 by @onurtemizkan)
Prettier 1.15ではメソッドシグネチャへの余分なセミコロン追加が廃止されました。
// Input
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;
addEventListener(type: string): void;
}
// Output (Prettier 1.14)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;;
addEventListener(type: string): void;
}
// Output (Prettier 1.15)
interface SharedWorkerGlobalScope extends WorkerGlobalScope {
// prettier-ignore
addEventListener(): void;
addEventListener(type: string): void;
}
デフォルト値付き分割代入で不正な括弧を出力しない (#5096 by @ikatyang)
以前はデフォルト値付き分割代入で不正な括弧が出力されていましたが、Prettier 1.15で修正されました。
// Input
({ prop: toAssign = "default" } = { prop: "propval" });
// Output (Prettier 1.14)
({ prop: (toAssign = "default") } = { prop: "propval" });
// Output (Prettier 1.15)
({ prop: toAssign = "default" } = { prop: "propval" });
修飾子付きクラスプロパティで--no-semiモードのセミコロンを出力しない (#5083 by @ikatyang)
Prettier 1.14では、次のプロパティに修飾子がある場合にクラスプロパティ末尾にセミコロンが追加されていましたが、これらのセミコロンは不要です。Prettier 1.15では不要なセミコロンが削除されます。
// Input
class Reader {
private [kBuffer]: Buffer
private [kOffset]: number
}
// Output (1.14)
class Reader {
private [kBuffer]: Buffer;
private [kOffset]: number
}
// Output (1.15)
class Reader {
private [kBuffer]: Buffer
private [kOffset]: number
}
ClassExpressionのextendsで複雑なノードの括弧を削除しない (#5074 by @ikatyang)
以前はクラス式のextends内にある複雑なノードの括弧が誤って削除され、不正なコードが生成されていました。この問題はPrettier 1.15で修正されました。
// Input
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};
// Output (Prettier 1.14)
let Subclass2 = class extends Superclass as AssertedSuperclass {};
// Output (Prettier 1.15)
let Subclass2 = class extends (Superclass as AssertedSuperclass) {};
TSOptionalTypeで必要な括弧を削除しない (#5056 by @ikatyang)
以前はタプル内のオプショナル型に必要な括弧が誤って削除され、不正なコードが生成されていました。この問題はPrettier 1.15で修正されました。
// Input
type T = [("a" | "b")?];
// Output (Prettier 1.14)
type T = ["a" | "b"?];
// Output (Prettier 1.15)
type T = [("a" | "b")?];
CSS
フロントマターと/* prettier-ignore */が共存する場合の不正出力を修正 (#5103 by @ikatyang)
Prettier 1.14ではソースからフロントマターを抽出する方法に起因してASTの位置情報が誤ってシフトされ、/* prettier-ignore */が不正な出力を生成していました。この問題はPrettier 1.15で修正されました。
/* Input */
---
hello: world
---
/* prettier-ignore */
.foo {}
/* Output (Prettier 1.14) */
---
hello: world
---
/* prettier-ignore */
pretti
/* Output (Prettier 1.15) */
---
hello: world
---
/* prettier-ignore */
.foo {}
CSS-in-JSテンプレートの改行を維持 (#5240 by @onurtemizkan)
CSS-in-JSテンプレート内の補間はあらゆる内容を含む可能性があるため、Prettier 1.15ではこれらの改行を維持します。
// Input
const foo = styled.div`
${secondary}
flex: 0 0 auto;
`;
// Output (Prettier 1.14)
const foo = styled.div`
${secondary} flex: 0 0 auto;
`;
// Output (Prettier 1.15)
const foo = styled.div`
${secondary}
flex: 0 0 auto;
`;
Markdown
フロントマター区切り文字の末尾スペースを許可 (#5107 by @ikatyang)
以前は区切り文字に末尾スペースを使用しないフロントマターのみ検出していたため、テーマ区切り(---)が誤ってフロントマター終端と認識される問題がありました。GitHubの処理方法に合わせて、Prettier 1.15ではフロントマター区切り文字の末尾スペースを許可するように修正しました。
(·は空白を表します)
<!-- Input -->
---
Title: Title
---···
__strong__ **strong**
---
<!-- Output (Prettier 1.14) -->
---
Title: Title
---···
__strong__ **strong**
---
<!-- Output (Prettier 1.15) -->
---
Title: Title
---···
**strong** **strong**
---
ラテン文字とハングルの間に空白を追加しない (#5040 by @ikatyang)
以前は可読性向上のためラテン文字とCJK文字の間に常に空白を挿入していましたが、フィードバックにより韓国語では従来のスペースを使用し、空白挿入が問題を引き起こすことが判明したため、Prettier 1.15ではハングルに対するこの挙動を無効化しました。中国語や日本語に対する挙動は変更ありません。
<!-- Input -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문
<!-- Output (Prettier 1.14) -->
예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문 Latin 예문
<!-- Output (Prettier 1.15) -->
예문Latin예문Latin 예문Latin예문 Latin예문Latin 예문 Latin 예문
フェンスドコードブロックの先頭/末尾改行を維持 (#5038 by @ikatyang)
Prettier 1.14ではフェンスドコードブロックの先頭/末尾改行が削除され、他のプラグイン(例: php)がこれらのコードブロックを処理できなくなる問題がありました。Prettier 1.15では先頭/末尾改行が維持されます。
<!-- Input -->
```
hello
```
<!-- Output (Prettier 1.14) -->
```
hello
```
<!-- Output (Prettier 1.15) -->
```
hello
```
単一行パラグラフの場合の脚注定義をインライン化 (#5025 by @ikatyang)
以前、脚注定義内でプリント幅に収まらないものは複数行に分割されていましたが、単一行の段落を分割しても可読性向上にはほとんど寄与しなかったため、Prettier 1.15では常にインライン表示するよう変更されました。
<!-- Input -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.
<!-- Output (Prettier 1.14) -->
[^1]:
In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.
<!-- Output (Prettier 1.15) -->
[^1]: In eos repellat fugit dolor veritatis doloremque nobis. Provident ut est illo.
空白のみの末尾改行前のリストを正しく出力 (#5024 by @ikatyang)
Prettier 1.14では、空白のみの末尾改行の前にリストがある場合、誤ってlooseリストとして認識されていました。この問題により、コードを安定させるには二度のフォーマットが必要になるケースがありましたが、コードが安定した時点で不正な出力が生成されるという問題がありました。Prettier 1.15でこの問題は修正されました。
// Input
if (condition) {
md`
- 123
- 456
`;
}
// First Output (Prettier 1.14)
if (condition) {
md`
- 123
- 456
`;
}
// Second Output (Prettier 1.14)
if (condition) {
md`
- 123
- 456
`;
}
// First & Second Output (Prettier 1.15)
if (true) {
md`
- 123
- 456
`;
}
YAML
引用符を正しくエスケープ (#5236 by @ikatyang)
以前は、doubleQuote内でエスケープされた引用符を含む文字列が不正な出力を生成していました。Prettier 1.15ではこれらが正しくエスケープされるようになりました。
# Input
"'a\"b"
# Output (Prettier 1.14)
''a"b'
# Output (Prettier 1.15)
'''a"b'
ドキュメントおよびドキュメントヘッドの末尾コメントを保持 (#5027 by @ikatyang)
Prettier 1.14では、ドキュメントおよびドキュメントヘッドの末尾コメントが移動されるケースがありました。Prettier 1.15ではこれらが常に保持されるようになりました。
# Input
--- # hello
... # world
# Output (Prettier 1.14)
# hello
# world
# Output (Prettier 1.15)
--- # hello
... # world
長い値を持つフローマッピング項目でエラーを発生させない (#5027 by @ikatyang)
以前は、長いフローマッピングの値が誤ってキーとして認識され、1024文字を超える暗黙的キーが許可されないため構文エラーが発生していました。Prettier 1.15でこの問題は修正されました。
(longは1024文字を超える長いテキストを表します)
# Input
{x: long}
# Output (Prettier 1.14)
SyntaxError: The "undefine...ndefined" key is too long
# Output (Prettier 1.15)
{
x: long
}
空のマッピング値には暗黙的キーを優先 (#4972 by @ikatyang)
以前は、空の値を持つマッピング項目は常に[明示的キー]で出力されていましたが、これは一般的ではなく混乱を招いていました。Prettier 1.15では、このような状況では常に暗黙的キーで出力するよう変更されました。
# Input
a:
b:
# Output (Prettier 1.14)
a:
? b
# Output (Prettier 1.15)
a:
b:
謝辞 ❤️
このリリースに貢献してくださった皆様、ならびに問題を報告しフィードバックをいただいた全ての方々に感謝申し上げます。Prettierはコミュニティ主導のプロジェクトであり、皆様のような方々の支援があってこそ継続可能です。心より御礼申し上げます。
ブログ記事のレビューをしてくださった@j-f1、@suchipi、@existentialismの各氏に特に感謝いたします。
