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

Prettier 1.8: Markdown サポート

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

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

このリリースではMarkdownサポートを追加し、新たな--insert-pragmaフラグを導入、多数のフォーマット問題を修正、新しい_実験的_演算子をサポートし、エディター統合のサポートを改善しました。

主な変更点​

Markdownサポート​

Markdownのサポート (#2943) by @ikatyang​

Markdownファイルに対してPrettierを実行できるようになりました！🎉

この実装はCommonMark仕様に高度に準拠しており、優れたremark-parseパッケージを基盤としています。

ワードラップ

Prettierの中核機能である指定行長でのコード折り返しがMarkdownにも適用されます。これにより単語の追加・削除時に手動で改行位置を調整せずに、80文字幅の整ったMarkdownファイルを維持できます。

入力:

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.

出力:

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.

注: この機能のオプション追加を検討中です。議論は#3183をご覧ください
更新: 1.8.2で--no-prose-wrapオプションを追加しました

CJKユーザー向け注意: 使用中のMarkdownレンダラーがCJK行末をサポートしていない場合、余分なスペースを除去するためmarkdown-it-perfect-newline-for-cjkやhexo-filter-fix-cjk-spacingなどのプラグインが必要です

// Source
一二三
四五六
七八九

// Rendered content with unsupported renderer
一二三 四五六 七八九

// Rendered content with supported renderer or via plugin
一二三四五六七八九

コードフォーマット

Prettierの汎用「マルチパーサー」により、Markdown内のコードブロックをフォーマット可能になりました！コードブロックに指定された言語コードを基に言語を判定するため、Prettierがサポートする全ての言語（自己参照的にMarkdown自体も可能）をフォーマットできます。

入力:

```js
reallyUgly    (
javascript
  )
```

```css
.h1 {     color : red }
```

出力:

```js
reallyUgly(javascript);
```

```css
.h1 {
  color: red;
}
```

注: Markdown内のコードフォーマットを無効化したい場合、他言語と同様にコードブロック直前に無視コメントを追加可能です

<!-- prettier-ignore -->
```js
ugly   ( code ) ;
```

リスト

リスト項目を並べ替えた後、Prettierを実行すると全ての番号が自動修正されます！

Markdownリスト

注: クリーンな差分を優先する場合、全リスト項目に1.を使用することでこの機能を無効化できます

テーブル

テーブルも内容に合わせて自動調整されます。自動化ツールなしでは保守が極めて困難な作業です。

Markdownテーブル

JavaScript内Markdown

mdまたはmarkdownタグ付きテンプレートリテラルを使用することで、JavaScript内のMarkdownコードをフォーマットできます。

const markdown = md`
  # heading

  1. list item
`;

CLI​

最初の docblock に @format が存在しない場合に挿入するオプションを追加 (#2865) by @samouri​

1.7 で追加された --require-pragma オプションは、ファイルがフォーマットされるためには /** @format */ プラグマを含んでいる必要があります。このプラグマを大量のファイルに追加するために、新たに --insert-pragma フラグが利用可能になりました。

prettier --write "folder/**/*.js" --insert-pragma

--loglevel オプションを追加 (#2992) by @ikatyang​

この便利な機能により、Prettier のログ出力を制御できるようになりました。また 1.7 以降、ログ出力を大幅に改善しています。

$ prettier --loglevel=debug blarg
$ ./bin/prettier.js --loglevel=debug blarg
[debug] normalized argv: {"_":["blarg"],"bracket-spacing":false,"color":true,"debug-check":false,"debug-print-doc":false,"flow-parser":false,"insert-pragma":false,"jsx-bracket-same-line":false,"list-different":false,"require-pragma":false,"semi":false,"single-quote":false,"stdin":false,"use-tabs":false,"version":false,"with-node-modules":false,"write":false,"loglevel":"debug","ignore-path":".prettierignore","config-precedence":"cli-override"}
[error] No matching files. Patterns tried: blarg !**/node_modules/** !./node_modules/**

JavaScript​

JSDoc コメントのインデントを修正 (#2470) by @maxdeviant​

これは Prettier の長年知られていた問題でした。コードをフォーマットした際にインデントレベルが変更されると、JSDoc コメントの位置がずれてしまうことがありました。この問題が修正されたことをお知らせします！

// Before
function theFunction2(action$, store) {
  /*
     * comments
     */
  return true;
}

// After
function theFunction2(action$, store) {
  /*
   * comments
   */
  return true;
}

パイプライン演算子と Nullish 合体演算子の出力をサポート (#3036) by @azz​

Prettier に2つの新しい実験的演算子のサポートを追加しました: パイプライン演算子 と Nullish 合体演算子 です。

パイプライン演算子 は現在 Stage 1 の提案段階です。

この提案は、F#、OCaml、Elixir、Elm、Julia、Hack、LiveScript および UNIX パイプに似た新しい演算子 |> を導入します。これは、読みやすい関数型の方法でチェーンされた関数呼び出しを合理化する後方互換性のある方法であり、組み込みプロトタイプを拡張する実用的な代替手段を提供します。

// Before
let result = exclaim(capitalize(doubleSay("hello")));

// After
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;

Nullish 合体演算子 も Stage 1 の提案です。

オプショナルチェーン演算子と組み合わせてネストされた構造でオプショナルプロパティアクセスを行う場合、プロパティアクセスの結果が null または undefined の場合にデフォルト値を提供することがよくあります。

この演算子は || に似ていますが、左辺が undefined または null の場合にのみ右辺を評価し、""、0、NaN などの場合には評価しない点が異なります。

const foo = object.foo ?? "default";

テンプレートリテラル内の式の改行を改善 (#3124) by @duailibe​

これも Prettier の既知の問題でした。式を含むテンプレートリテラル文字列を出力する際に、プリント幅を超えると、式の内部の不自然な位置でコードを折り返していました。現在では、Prettier が改行を挿入する必要がある場合、${ と } の間で行われるようになりました。

// Before
const description = `The value of the ${cssName} css of the ${this
  ._name} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
  ? "is-dirty"
  : ""} combo-box__input`;

// After
const description = `The value of the \${cssName} css of the \${
  this._name
} element`;

const foo = `mdl-textfield mdl-js-textfield ${className} ${
  content.length > 0 ? 'is-dirty' : ''
} combo-box__input`

JSX​

アロー関数の属性における末尾の } をインラインにしない (#3110) by @duailibe​

Airbnb スタイルガイド に近づけるため、また、この方法での出力は意図したものではなかったため、JSX 内で } を次の行に移動しました。これにより差分がわかりやすくなり、エディタで行を移動してコードを整理するのが容易になります。

// Before
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)}
/>;

// After
<BookingIntroPanel
  logClick={data =>
    doLogClick("long_name_long_name_long_name", "long_name_long_name_long_name", data)
  }
/>;

その他の変更​

JavaScript​

ファクトリ検出で複数要素を扱えるように修正 (#3112) by @vjeux​

Prettierが式をファクトリと判断するヒューリスティックにバグがありました。今回の修正でより長いメンバー式でも正しく動作するようになりました。

// Before
window.FooClient
  .setVars({
    locale: getFooLocale({ page }),
    authorizationToken: data.token
  })
  .initVerify("foo_container");

// After
window.FooClient.setVars({
  locale: getFooLocale({ page }),
  authorizationToken: data.token
}).initVerify("foo_container");

関数名と開き括弧の間のコメントを適切に処理 (#2979) by @azz​

コメントを適切な位置に出力するのは終わりのない挑戦です😉。この修正により、関数名の隣にあるコメントが正しく再出力されるようになりました。

// Before
function f(/* comment*/ promise) {}

// After
function f /* comment*/(promise) {}

メンバーチェーン内の連続するCallExpressionをサポート (#2990) by @chrisvoll​

メンバーチェーンはPrettierの中で最も複雑な部分の1つです。このPRでは、連続した呼び出しによって次のメソッドが次の行にプッシュされない問題を修正します。

// Before
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")().then(function() {
  doSomething();
});

// After
wrapper
  .find("SomewhatLongNodeName")
  .prop("longPropFunctionName")()
  .then(function() {
    doSomething();
  });

長いメンバー呼び出しチェーン内の空行を考慮 (#3035) by @jackyho112​

以前はPrettierがメンバーチェーン内のすべての改行を削除していましたが、ソースにある場合は最大1つまで保持するようになりました。これは複数行に分割したい流れるようなAPIに便利です。

angular
  .module("AngularAppModule")

  // Constants.
  .constant("API_URL", "http://localhost:8080/api")

  // App configuration.
  .config(appConfig)
  .run(appRun);

改行時に最初の引数が取り残される問題を修正 (#3079) by @mutdmour​

オブジェクトインライン動作の特別な処理が原因で、関数呼び出しのインデントが欠落していた問題に対処します。

// Before
db.collection("indexOptionDefault").createIndex({ a: 1 },
{
  indexOptionDefaults: true
},
function(err) {
  // code
});

// After
db.collection("indexOptionDefault").createIndex(
  { a: 1 },
  {
    indexOptionDefaults: true
  },
  function(err) {
    // code
  }
);

メンバー式内の二項演算子で括弧を改行 (#2958) by @duailibe​

同様に、論理式でインデントが欠落していた別のエッジケースも修正されました。

// Before
const someLongVariable = (idx(
  this.props,
  props => props.someLongPropertyName
) || []
).map(edge => edge.node);

// After
const someLongVariable = (
  idx(this.props, props => props.someLongPropertyName) || []
).map(edge => edge.node);

NewExpression内のMemberExpressionの改行を防止 (#3075) by @duailibe​

行を改行する方法は数多くありますが、このケースでは特に不自然に見える改行が発生していたため修正されました！

// Before
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this
      .Promise((resolve, reject) => {
        // do something
      });
  }
}

// After
function functionName() {
  if (true) {
    this._aVeryLongVariableNameToForceLineBreak = new this.Promise(
      (resolve, reject) => {
        // do something
      }
    );
  }
}

メソッドチェーン内の配列アクセッサを修正 (#3137) by @duailibe​

メソッドチェーンでは要素をグループ化して行を分割しますが、配列へのアクセスはグループの先頭ではなく末尾に出力されるべきでした。

// Before
find('.org-lclp-edit-copy-url-banner__link')
  [0].getAttribute('href')
  .indexOf(this.landingPageLink)

// After
find('.org-lclp-edit-copy-url-banner__link')[0]
  .getAttribute('href')
  .indexOf(this.landingPageLink)

Flow と TypeScript​

交差オブジェクト型のインデントを修正 (#3074) by @duailibe​

交差型における軽微な配置バグが修正されました。

// Before
type intersectionTest = {
  propA: X
} & {
  propB: X
} & {
    propC: X
  } & {
    propD: X
  };

// After
type Props = {
  propA: X
} & {
  propB: X
} & {
  propC: X
} & {
  propD: X
};

ConditionalExpression内のTSAsExpressionの括弧を保持 (#3053) by @azz​

TypeScriptのasアサーションで括弧を保持する必要があるケースが見落とされていましたが、これで修正されました。

// Before
aValue as boolean ? 0 : -1;

// After
(aValue as boolean) ? 0 : -1;

JSX​

複数のJSX空白文字を統合 (#2973) by @karl​

この修正により、JSXフォーマットが安定するまでに複数回実行が必要となる問題が解決されました。この現象は、複数のJSX空白要素や空白＋スペースが続く場合に発生していました。

// Before
<div>
    {" "} <Badge src={notificationIconPng} />
</div>;

// After
<div>
  {" "}
  <Badge src={notificationIconPng} />
</div>

末尾コメントがある場合にJSXブラケットを同行で出力しない (#3088) by @azz​

これは--jsx-bracket-same-lineオプションに関する問題でした。ブラケットを常に同行に配置できるわけではないことが判明しました...

// Input
<div
  // comment
>
  {foo}
</div>

// Before
<div>
// comment
  {foo}
</div>;

// After
<div
// comment
>
  {foo}
</div>;

CSS​

グリッド宣言内の改行を保持 (#3133) by @duailibe​

Prettierはgridおよびgrid-template-*ルールのフォーマット時に、ソースコード内の改行を保持するようになりました。これらは別々の行に保持することが重要ですが、他のルールと同様のフォーマット（数値や引用符など）は引き続き適用されます。

/* Original Input */
div {
  grid:
    [wide-start] 'header header header' 200.000px
    [wide-end] "footer footer footer" .50fr
    / auto 50.000px auto;
}

/* Before */
div {
  grid: [wide-start] "header header header" 200px [wide-end]
    "footer footer footer" 0.5fr / auto 50px auto;
}

/* After */
div {
  grid:
    [wide-start] "header header header" 200px
    [wide-end] "footer footer footer" 0.5fr
    / auto 50px auto;
}

SCSS​

SCSSマップをCSSルールのようにフォーマット (#3070) by @asmockler​

SCSSマップは複数行に分割して出力する方が見栄えが良いことが判明しました。

// Before
$map: (color: [#111111](https://github.com/prettier/prettier/pull/111111), text-shadow: 1px 1px 0 salmon)

// After
$map: (
  color: [#111111](https://github.com/prettier/prettier/pull/111111),
  text-shadow: 1px 1px 0 salmon
);

CSS-in-JS​

styled(Foo).attrs(...)`` のフォーマット修正 (#3073) by @existentialism​

Prettierは以下の形式のstyled-componentsコード内のCSSをフォーマットするようになりました：

styled(Component).attrs({})`
  color: red;
`;

GraphQL​

式を含むGraphQLテンプレートリテラルのフォーマット防止 (#2975) by @duailibe​

PrettierはGraphQL内のJavaScript式のフォーマットをサポートしていません。追跡用の#2640を参照してください。式のフォーマットが無効なコードを生成するバグがあったため、完全なサポート実装までJavaScript式を含むGraphQLのフォーマットを無効化しました。

// Before
(invalid code)

// After
graphql(schema, `{ query test { id }} ${fragment}`)

CLI​

TTYでないstdoutではANSIコードを使用しない (#2903) by @Narigo​

従来、--list-differentの出力を他のツールにパイプする際、ファイル変更状態を示すANSIカラーコードが問題となっていました。このPRでは、Prettierの出力が別プロセスにパイプされる場合にカラー表示を無効化します。

設定機能​

CLIで相対パスを使用 (#2969) by @ahmedelgabri​

この修正により、./で始まるパスをCLIに渡した際に.prettierignoreのパターンが正しく適用されないバグが解決されました。

## .prettierignore
path/to/*.js

この修正後、以下の実行時にファイルが書き込まれることはありません：

$ prettier --write ./path/to/*.js

設定ファイルからの相対パス解決 (#3037) by @azz​

この修正により、特定の条件下で絶対パスを使用した場合にresolveConfig APIが.prettierrcのオーバーライドを尊重しない問題が解決されました。

コア​

CJK文字の幅と結合文字への対応 (#3003, #3015) by @ikatyang​

中国語・日本語・韓国語（CJK）の文字が2文字分の幅として扱われるようになりました。

// Before (exceeds print width when CJK characters are 2x monospace chars)
const x = ["中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文", "中文"];

// After
const x = [
  "中文",
   // ...
  "中文"
];

また#3015では、結合文字（例: Á）が1文字として正しくカウントされるようになりました。

エディタサポート​

getSupportInfo()の実装と推論への活用 (#3033) by @azz​

APIに新機能(prettier.getSupportInfo([version]))とCLIオプション--support-infoを追加しました。これにより現在のバージョンや過去バージョンがサポートする言語を取得できるようになります。CodeMirror IDやtmScopesなどテキストエディタ統合で有用な情報も提供され、ルックアップテーブルの作業を自動化できます。

内部ではこの情報を活用して、拡張子とパーサーのマッピングや、.prettierrcやJakefileなど拡張子のない一般的なファイルのサポートを実現しています。

## prettier knows that this file is JSON now.
$ prettier --write .prettierrc

言語に応じたソース要素の分割 (#3069) by @CiGit​

範囲指定フォーマットをサポートするエディタで、オブジェクトのフォーマット時にPrettierがクラッシュする問題を修正しました。

謝辞 ❤️​

本リリースに貢献してくださった皆様、および課題を報告してくださった皆様に心より感謝申し上げます。Prettierは多くの開発者に信頼される高度に安定したソフトウェアへと成長しました。私たちはこの信頼を重く受け止め、コードを破壊する稀な問題を最優先で修正しています。問題を発見された場合は、遠慮なくGitHubで新規Issueを作成してください！