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.3k
Prettier のしくみ
2019年7月30日のginzajsのLT資料です
sosukesuzuki
July 30, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
260
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.4k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.1k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
8.7k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3k
Prettier 2.0
sosukesuzuki
2
1.5k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
340
Other Decks in Programming
See All in Programming
技術カンファレンスをより楽しむためにやるべき N 個のこと / N Things You Should Do to Enjoy Tech Conferences More
mackey0225
3
270
Kotlin Script 활용하기
kciter
0
120
我々はなぜテストを書くのか / Why we write test codes
takaking22
6
690
Fat Controller は悪か? ~光のFat Controller・闇のガリController~
stwile
1
250
プログラミングスクールのつながりがキャリアにつながるのかもしれない話 / Connections at programming schools may lead to a career
aiandrox
0
290
並行処理を学びGuzzleと仲良くなる
shimabox
2
390
アーキテクチャレベルで考える開発生産性 / architecture-and-productivity
minodriven
14
4.1k
開発生産性の観点から考える自動テスト(2024/06版) / Automated Test Knowledge from Savanna 202406 Findy dev-prod-con edition
twada
PRO
11
2.3k
えにしテック、あるいは人間関係のエクササイズ / #enishitech-15th-anniv
kakutani
6
370
Get started with Compose Multiplatform!
ogi2ogi
0
1.1k
技術サポートでよく見かけるパターンと便利な活用方法
tamai_63
0
170
CSC307 Lecture 02
javiergs
PRO
0
280
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
516
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Building Effective Engineering Teams - LeadDev
addyosmani
41
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
143
43k
Why Our Code Smells
bkeepers
PRO
331
56k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
Navigating Team Friction
lara
180
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
661
120k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Designing for humans not robots
tammielis
247
25k
Raft: Consensus for Rubyists
vanstee
133
6.4k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました