191
93

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Prettier 2.0 の主要な変更

Last updated at Posted at 2020-03-21

ウェブ開発でよく使われているコードフォーマッターである Prettier の 2.0 がリリースされました。実装が間に合わず遅れている間に TypeScript 3.8 のリリースがあったりといろいろあり、当初の予定より 2 ヶ月ほど遅れてしまいました。

主要な変更について紹介します。詳細が知りたい方は、リリースブログや PR や Issue を確認してください。

Node 10.13.0 未満のサポート終了

https://github.com/prettier/prettier/pull/6907
https://github.com/prettier/prettier/pull/6908
https://github.com/prettier/prettier/pull/7302

EOL が来ているバージョンのサポートを終了します。

デフォルトオプションの変更

いくつかのオプションのデフォルト値が変更されます。現在デフォルト値を使っていてこれによるコードの修正を回避したい場合、明示的に設定をする必要があります。

trailingComma(末尾カンマ)

1.x 2.x
none es5

1.x ではあらゆる末尾カンマを許容しませんでしたが、2.x では ECMAScript 5 でバリッドになるように末尾カンマをつけます。

// 1.x
const obj = {
  foo
};

// 2.x
const obj = {
  foo,
};

ただし、all ではなく es5 なので関数の引数リストの末尾カンマは許容しません。

arrowParens(アロー関数の引数が一つのときのカッコ)

1.x 2.x
avoid always

1.x では、アロー関数の引数が1つのときカッコをつけないようにフォーマットをしていましたが、2.x では常につけるようになります。

// 1.x
arg => arg;

// 2.x
(arg) => arg;

endOfLine(改行コード)

1.x 2.x
auto lf

1.x ではファイル内の他の改行コードに合わせ、混在している場合は最初に使われているものに統一していましたが、2.x からは lf に統一されます。

フォーマットの変更

よく使われそうな構文のフォーマットに変更があります。

function キーワードのあとの空白

https://github.com/prettier/prettier/pull/3903
https://github.com/prettier/prettier/pull/7516

関数式(関数宣言ではない)のfunctionキーワードのあとに空白が入るようになります。

// 1.x
(function() {});

// 2.x
(function () {});

ただし、ジェネレータは例外でfunction*のあとに空白を追加します。

// 1.x
const generatorFunc = function*() {};

// 2.x
const generatorFunc = function* () {};

新機能等

いくつかの新しい機能や改善があります。

babel-ts パーサーオプション

1.x では TypeScript のパースに typescript-estree のみを使っていましたが、 2.x からは Babel の TypeScript パーサーを使えるようになります。

ただし、parserオプションを指定せずに TypeScript のフォーマットを行った場合は typescript-estree を使ってパースします。Babel を使って TypeScript のパースを行う場合はオプションで明示する必要があります。

# typescript-estree を使ってパースする
prettier foo.ts

# Babel を使ってパースする
prettier --parser=babel-ts foo.ts

TypeScript 3.8 のサポート

https://github.com/prettier/prettier/pull/7631
https://github.com/prettier/prettier/pull/7764
https://github.com/prettier/prettier/pull/7804

TypeScript 3.8 から新しく追加された次の構文をサポートします。

CLI の改善

1.x では CLI にファイル名しか渡せませんでしたが、2.x からはディレクトリを渡せるようになります。

# 1.x
prettier "**/*.{js,jsx,ts,tsx,md,json,yaml,html}"

# 2.x
prettier .

非推奨機能の廃止

いくつかの非推奨機能が廃止になります。おそらくこれらの機能を使っている人は少ないので、ここではあまり触れません。詳しくは https://github.com/prettier/prettier/issues/4097 を読んでください。

多くのバグ修正

通常のマイナーバージョンアップと同様に、多くのバグ修正が含まれます。

191
93
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
191
93

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?