Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Prettier のしくみ
sosukesuzuki
July 30, 2019
Programming
4
1.7k
Prettier のしくみ
2019年7月30日のginzajsのLT資料です
sosukesuzuki
July 30, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
13
6.1k
Prettierに従わなくてもいい場合
sosukesuzuki
7
2.5k
Prettier 2.0
sosukesuzuki
2
1.3k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
240
Other Decks in Programming
See All in Programming
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
720
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
1k
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
150
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
690
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
200
Milestoner
bkuhlmann
1
200
Kotlin KSP - Intro
taehwandev
1
490
The future of trust stores in Python
sethmlarson
0
180
Android入門
hn410
0
310
Named Document って何?
harunakano
0
440
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
29
18k
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
310
33k
Designing for Performance
lara
596
63k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Robots, Beer and Maslow
schacon
152
7.1k
Practical Orchestrator
shlominoach
178
8.6k
Navigating Team Friction
lara
175
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Thoughts on Productivity
jonyablonski
43
2.2k
Designing with Data
zakiwarfel
91
3.9k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました