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
310
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.5k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.1k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
8.8k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3k
Prettier 2.0
sosukesuzuki
2
1.5k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
350
Other Decks in Programming
See All in Programming
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
CSC307 Lecture 06
javiergs
PRO
0
360
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
AHC035解説
terryu16
0
730
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
166
14k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Side Projects
sachag
451
42k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Cult of Friendly URLs
andyhume
75
5.9k
Docker and Python
trallard
37
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Code Reviewing Like a Champion
maltzj
517
39k
Making Projects Easy
brettharned
111
5.7k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました