Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
94
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Prettier 2.0 の主要な変更

ウェブ開発でよく使われているコードフォーマッターである 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 を読んでください。

多くのバグ修正

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
94
Help us understand the problem. What are the problem?