Tweet
Tweet

Slide 1

Slide 1 text

Prettier のしくみ ginza.js 2019/07/30

Slide 2

Slide 2 text

自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Ubie, inc インターン(フロントエンドエンジニア) - Boostnoteメンテナ - Prettier コントリビュータ - 筑波大学情報科学類

Slide 3

Slide 3 text

Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML / CSS / YAML / GraphQL などに 対応

Slide 4

Slide 4 text

フォーマット例

Slide 5

Slide 5 text

使い方①ーCLI

Slide 6

Slide 6 text

使い方②ーNode.js

Slide 7

Slide 7 text

使い方③ーBrowser（ESM）

Slide 8

Slide 8 text

Prettier のすること もとのテキスト フォーマットされたテ キスト

Slide 9

Slide 9 text

Prettier のすること もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②

Slide 10

Slide 10 text

パース PrettierはもとのテキストをパースしてAST(抽象構文木)を作る パーサーは外部ライブラリに依存する - JavaScript → @babel/parser - TypeScript → @typescript-eslint/typescript-estree - Markdown → remark.js - など 作ったASTはprinterと呼ばれる関数にわたされる

Slide 11

Slide 11 text

Prettier の扱うAST パーサーに外部のものを使うので当然ASTも外部のものを扱う。 - JavaScript/TypeScript: ESTree - Markdown: mdast - など ESLint ルールや Babel プラグインなどを作ったことがある人は printer のコードを理解 しやすいかも。

Slide 12

Slide 12 text

プリント① ASTから、Docと呼ばれる Prettier がコードを整形するために使う中間形式への変換を 行う。 それぞれのASTごとに異なる関数が用意されている。 - JavaScript/TypeScript: src/language-js/printer-estree.js - Markdown: src/language-markdown/printer-markdown.js ASTの各ノードの種類に応じてSwitch文で分岐させて具体的なフォーマットを決定する 実際にテキストの整形が行われるのはここ

Slide 13

Slide 13 text

Doc コードを整形するために使う中間形式 AST とは違って整形対象の言語に依存しない テキストに近いかたちをしていて、次のような情報を含む - どこにインデントが入るか - どこに改行が入るか - など どの言語のASTから変換されたDocでも同一のアルゴリズムでテキストに変換される

Slide 14

Slide 14 text

プリント② Docから文字列に変換する ここで変換された文字列が最終的なフォーマット結果 - src/doc/doc-printer.js (printDocToString) どの言語のコードから変換されたDocでもこの関数を使ってテキストに変換される

Slide 15

Slide 15 text

まとめ もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②

Slide 16

Slide 16 text

まとめ もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②

Slide 17

Slide 17 text

ありがとうございました