Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prettier のしくみ

Prettier のしくみ

2019年7月30日のginzajsのLT資料です

sosukesuzuki

July 30, 2019
Tweet

More Decks by sosukesuzuki

Other Decks in Programming

Transcript

  1. 自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Ubie,

    inc インターン(フロントエンドエンジニア) - Boostnoteメンテナ - Prettier コントリビュータ - 筑波大学情報科学類
  2. パース PrettierはもとのテキストをパースしてAST(抽象構文木)を作る パーサーは外部ライブラリに依存する - JavaScript → @babel/parser - TypeScript →

    @typescript-eslint/typescript-estree - Markdown → remark.js - など 作ったASTはprinterと呼ばれる関数にわたされる
  3. Prettier の扱うAST パーサーに外部のものを使うので当然ASTも外部のものを扱う。 - JavaScript/TypeScript: ESTree - Markdown: mdast -

    など ESLint ルールや Babel プラグインなどを作ったことがある人は printer のコードを理解 しやすいかも。
  4. プリント① ASTから、Docと呼ばれる Prettier がコードを整形するために使う中間形式への変換を 行う。 それぞれのASTごとに異なる関数が用意されている。 - JavaScript/TypeScript: src/language-js/printer-estree.js -

    Markdown: src/language-markdown/printer-markdown.js ASTの各ノードの種類に応じてSwitch文で分岐させて具体的なフォーマットを決定する 実際にテキストの整形が行われるのはここ