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.2k
Prettier のしくみ
2019年7月30日のginzajsのLT資料です
sosukesuzuki
July 30, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.2k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
8.5k
Prettierに従わなくてもいい場合
sosukesuzuki
7
2.9k
Prettier 2.0
sosukesuzuki
2
1.5k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
320
Other Decks in Programming
See All in Programming
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
2
200
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
180
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
上手な探索的テストとその上達方法について
matsu802
4
660
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
OpenTelemetry のサービスという概念について
azukiazusa1
1
410
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.5k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Building Your Own Lightsaber
phodgson
97
5.6k
Agile that works and the tools we love
rasmusluckow
323
20k
Teambox: Starting and Learning
jrom
126
8.4k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Adopting Sorbet at Scale
ufuk
66
8.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Git: the NoSQL Database
bkeepers
PRO
421
63k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました