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 2.0
Search
sosukesuzuki
February 05, 2020
Programming
2
1.6k
Prettier 2.0
https://ginzajs.connpass.com/event/162321/
の発表内容です
sosukesuzuki
February 05, 2020
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
420
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.8k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.2k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.1k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
370
Prettier のしくみ
sosukesuzuki
4
2.4k
Other Decks in Programming
See All in Programming
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
Remix on Hono on Cloudflare Workers
yusukebe
1
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Click-free releases & the making of a CLI app
oheyadam
2
120
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Jakarta EE meets AI
ivargrimstad
0
670
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
CSC509 Lecture 11
javiergs
PRO
0
180
Jakarta EE meets AI
ivargrimstad
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
We Have a Design System, Now What?
morganepeng
50
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Music & Morning Musume
bryan
46
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
Prettier 2.0 ginza.js 2020/02/05
自己紹介 - 鈴木颯介(すずきそうすけ) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier -
筑波大学情報科学類
Prettier - JavaScript で書かれたコードフォーマッター - Node.js / ブラウザで動く - JS
/ TS / HTML / CSS / YAML / GraphQL などに 対応 - 現在 1.19.1(master) - 2.0 が開発中(next)
Prettier
注意 - 今日話す内容は、発表時点で next ブランチに実装されているものもしくはメンバー 内で合意がとれているもの - 今後の状況によっては変更される可能性がある
概要 - 全体的に変更は小さめ - デフォルトオプションの変更 - 影響の大きいフォーマットの変更 - Node 8
以下のサポート終了 - など
経緯 - 2018年頃から多くの破壊的変更を含む野心的な 2.0 が計画されていた - しかし実際にはいくつかの大きな変更を含む小さな 2.0 が開発されている
経緯 - 1.19 のときに、Node のバージョン周りで面倒だった - TypeScript 3.7 をサポートするためには、依存している @typescript-eslint/typescript-estree
の バージョンをあげる必要があったけど、 typescript-estree と Prettier でサポートしている Node の バージョンが違かった。
経緯 - 今まで Node 4 までサポートしていた - いくつかの構文は Babel を使って対応していたがトランスパイル後のサイズなどを
考えて使えなかった構文がある。 - 例えば class は使わずに function で書いていた。 - スプレッド構文も使えないので Object.assign がいっぱいある。
経緯 - 単純に EOL がきているバージョンをサポートし続けるのはきつい。
経緯 - 当初予定していた 2.0 の機能の多くを延期 - それらは 3.0 として将来的に実装される予定 -
Node 8 以下のドロップを最優先とした 2.0 の開発がはじまった! - https://github.com/prettier/prettier/issues/6888
Node 8 以下のドロップ - Node 8 以下(正確には10.13.0未満)のサポートを終了する
デフォルトオプションの変更 - trailingComma - endOfLine - arrowParens
デフォルトオプションの変更- trailingComma - trailincComma オプションには all・none・es5 の3つがある - all はつけられる箇所すべてに末尾カンマをつける
- none は全部つけない - es5 は ES5 でバリッドになるようにつける - 関数の引数リストの末尾カンマはつかない
デフォルトオプションの変更- trailingComma - https://github.com/prettier/prettier/pull/6963 - trailincComma オプションはデフォルトで es5 になる -
いままでは none だった - 基本的に末尾カンマがつく
デフォルトオプションの変更- endOfLine - https://github.com/prettier/prettier/pull/7435 - 改行コードを決める - endOfLine オプションがデフォルトで lf
になる - これまでは auto だった - (そのファイル内の他の改行コードに合わせ、もし混在している場合は、最初に使われている改行 コードで全部合わせる )
デフォルトオプションの変更- arrowParens - アロー関数の単一の引数にカッコをつけるかを決める - デフォルトで always になる - 今までは
avoid だった always(2.0からデフォルトになる) avoid(今のデフォルト) 引数にカッコをつける 引数にカッコをつけない
大きめのフォーマットの変更 - よく使われそうな構文のフォーマットが変わる
大きめのフォーマットの変更- 関数式の空白 - https://github.com/prettier/prettier/pull/3903 - Function Expression の function のあとに空白が入るようになる
- Function Declaration との統一のため Function Declaration Function Expression
大きめのフォーマットの変更- 関数式の空白 1.19.1 2.0
大きめのフォーマットの変更- 関数式の空白 - generator の * の扱いも少し変わるかもしれない - https://github.com/prettier/prettier/issues/7028 -
キーワードじゃなくて名前の方に * がつく - 現在議論中なので変更されるかも 1.19.1 2.0
リリース時期について - 2020年の2月2日を予定していたが、開発が間に合わず延期になっている - いまのところ未定だができるだけ早くリリースしたい
まとめ - デフォルトオプションの変更 - 影響の大きいフォーマットの変更 - Node 8 以下のサポート終了 -
その他細かな変更 - Babel のパーサーを使って TypeScript のフォーマットを行う `parser=babel-ts` - ファイルではなく、ESLint のようにディレクトリを指定できるようにする (WIP) - メソッドチェインのフォーマットの改善 - 多くのフォーマットのバグの修正 - リリース時期は未定だができるだけ早くやりたい