Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Prettier のしくみ
Search
sosukesuzuki
July 30, 2019
Programming
4
2.6k
Prettier のしくみ
2019年7月30日のginzajsのLT資料です
sosukesuzuki
July 30, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
デザインシステムと生成AIの相性について考える
sosukesuzuki
4
940
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.3k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
530
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
2k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.2k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.4k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.1k
Prettier 2.0
sosukesuzuki
2
1.7k
Other Decks in Programming
See All in Programming
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.2k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
200
インターフェース設計のコツとツボ
togishima
2
430
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.4k
Duke on CRaC with Jakarta EE
ivargrimstad
1
650
ビカム・ア・コパイロット
ymd65536
1
190
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6k
Investigating Multithreaded PostgreSQL
macdice
0
140
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
390
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
660
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
600
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
The Cost Of JavaScript in 2023
addyosmani
49
8k
It's Worth the Effort
3n
184
28k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
GitHub's CSS Performance
jonrohan
1031
460k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
Prettier のしくみ ginza.js 2019/07/30
自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Ubie,
inc インターン(フロントエンドエンジニア) - Boostnoteメンテナ - Prettier コントリビュータ - 筑波大学情報科学類
Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML /
CSS / YAML / GraphQL などに 対応
フォーマット例
使い方①ーCLI
使い方②ーNode.js
使い方③ーBrowser(ESM)
Prettier のすること もとのテキスト フォーマットされたテ キスト
Prettier のすること もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②
パース PrettierはもとのテキストをパースしてAST(抽象構文木)を作る パーサーは外部ライブラリに依存する - JavaScript → @babel/parser - TypeScript →
@typescript-eslint/typescript-estree - Markdown → remark.js - など 作ったASTはprinterと呼ばれる関数にわたされる
Prettier の扱うAST パーサーに外部のものを使うので当然ASTも外部のものを扱う。 - JavaScript/TypeScript: ESTree - Markdown: mdast -
など ESLint ルールや Babel プラグインなどを作ったことがある人は printer のコードを理解 しやすいかも。
プリント① ASTから、Docと呼ばれる Prettier がコードを整形するために使う中間形式への変換を 行う。 それぞれのASTごとに異なる関数が用意されている。 - JavaScript/TypeScript: src/language-js/printer-estree.js -
Markdown: src/language-markdown/printer-markdown.js ASTの各ノードの種類に応じてSwitch文で分岐させて具体的なフォーマットを決定する 実際にテキストの整形が行われるのはここ
Doc コードを整形するために使う中間形式 AST とは違って整形対象の言語に依存しない テキストに近いかたちをしていて、次のような情報を含む - どこにインデントが入るか - どこに改行が入るか -
など どの言語のASTから変換されたDocでも同一のアルゴリズムでテキストに変換される
プリント② Docから文字列に変換する ここで変換された文字列が最終的なフォーマット結果 - src/doc/doc-printer.js (printDocToString) どの言語のコードから変換されたDocでもこの関数を使ってテキストに変換される
まとめ もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②
まとめ もとのテキスト AST(抽象構文木) Doc フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました