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.5k
Prettier のしくみ
2019年7月30日のginzajsのLT資料です
sosukesuzuki
July 30, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.1k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
480
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.9k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.2k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.3k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.1k
Prettier 2.0
sosukesuzuki
2
1.6k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
390
Other Decks in Programming
See All in Programming
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
210
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
Unity Android XR入門
sakutama_11
0
180
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
190
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
850
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
500
Open source software: how to live long and go far
gaelvaroquaux
0
660
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
200
Formの複雑さに立ち向かう
bmthd
1
920
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
Designing for humans not robots
tammielis
250
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Code Reviewing Like a Champion
maltzj
521
39k
4 Signs Your Business is Dying
shpigford
182
22k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Building Your Own Lightsaber
phodgson
104
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Navigating Team Friction
lara
183
15k
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 フォーマットされたテ キスト パース プリント① プリント②
ありがとうございました