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
1.1k
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.4k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
540
「書いた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.5k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.1k
Prettier 2.0
sosukesuzuki
2
1.7k
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Is Xcode slowly dying out in 2025?
uetyo
1
270
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
690
Making Projects Easy
brettharned
116
6.3k
Designing for humans not robots
tammielis
253
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
Embracing the Ebb and Flow
colly
86
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました