メインコンテンツへスキップ

Prettier 1.7: JSXの調整、プラグマ、TypeScriptとCSSの修正

· 1分で読める
Lily Skye
Lily Skye
非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

このリリースでは、JSX、TypeScript、CSS、JavaScriptのフォーマットに関するバグ修正と調整、およびいくつかの新機能が提供されます。

主な変更点​

JSXの変更点​

1.6.0リリースで行ったJSXフォーマットの変更について多くのコミュニティフィードバックをいただき、フォーマットをコミュニティの標準と期待に近づけるための変更を実施しました。

1.6.0では、三項演算子（条件式 a ? b : c）に対する2つ目のスタイルを追加しました。これは括弧でJSXコンテンツを区切るコミュニティで人気のフォーマットに基づいています：

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

この追加以前は、Prettierは三項演算子を一貫した1つのスタイルでのみフォーマットしていました：

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

1.6.0では、新しい「JSXモードの三項演算子」を使用するタイミングを決定するために次のヒューリスティックを採用していました：

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

しかし、このヒューリスティックにより予期せぬフォーマットが発生することがありました： GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries

そこで1.7.0では、ヒューリスティックを次のように改訂しました：

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

この変更により、驚くような三項演算子のフォーマットが減ることを期待しています。

この変更を実装し、報告された他のJSX関連フォーマット問題にも対応してくれた@duailibeに心より感謝します。

CSS文字ケースの一貫性​

今回のリリースではCSSフォーマットの改善に時間を割き、その一環として@lydellが文字ケースの正規化に取り組みました。

これにより、CSS内のほぼすべての要素がlower case（小文字）で出力されるようになります。

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

ただしご安心ください。Prettierは$scss-variables、[@less](https://github.com/less)-variables、FunctionNames()には影響しません。プリプロセスはそのままお使いください！

プラグマサポート​

新しいオプション--require-pragma（APIではrequirePragma）が追加されました。このオプションを指定すると、ファイル先頭に次のような特別な「プラグマ」コメントがある場合のみPrettierがファイルを再フォーマットします：

/**
 * @prettier
 */

または

/**
 * @format
 */

このアイデアは@ajhyndmanによるもので、@wbinnssmithが実装しました。

その他の変更​

TypeScript​

Prettier 1.6.1には、never型を使用したTypeScriptを解析する際にエラーがスローされるバグがありました。例：

Observable.empty<never>();

またPrettier 1.6.1は*.d.tsファイル内のenum宣言からdeclareキーワードを誤って削除していました：

// In
declare const enum Foo {}

// Out
const enum Foo {}

これらの問題は両方とも修正されました。TypeScriptコミュニティを支えるこれらの修正を提供してくれた@JamesHenryと@existentialismに感謝します！

設定機能​

設定優先順位のカスタマイズ​

新しいCLIオプション--config-precedenceが追加されました。このオプションはPrettierが設定ソースを優先する方法を設定します。有効な値は次のとおりです：

cli-override（デフォルト） - CLIオプションが設定ファイルより優先

file-override - 設定ファイルがCLIオプションより優先

prefer-file - 設定ファイルが見つかった場合、そのファイルを評価し他のCLIオプションは無視します。設定ファイルが見つからなかった場合、CLIオプションは通常通り評価されます。

エディタ統合環境で有用で、ユーザーがデフォルト設定を持ちつつプロジェクト固有の設定を尊重したい場合に適しています。

prettier.resolveConfig.sync​

以前は、ソースファイルの設定を同期的に解決するAPIメソッドが存在しませんでした。cosmiconfigへの新機能追加（@sudo-suhasさんによる）のおかげで、@ikatyangがPrettier APIにこの機能を追加できるようになりました。

このリリースでマージされたPR​

このリリースで解決された問題​

このリリースに貢献してくださった皆様、課題報告やコード貢献、コードレビュー、コメントやフィードバックなど様々な形でご協力いただき心より感謝申し上げます。Prettierはコミュニティ主導のプロジェクトであり、皆様のような方々の支えがあって継続できています。本当にありがとうございました！