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
イテレータとイテラブルの概要と課題、未来
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 の TypeScript 3.7 対応について
sosukesuzuki
0
390
Prettier のしくみ
sosukesuzuki
4
2.5k
Other Decks in Programming
See All in Programming
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
Unity Android XR入門
sakutama_11
0
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
sappoRo.R #12 初心者セッション
kosugitti
0
280
Open source software: how to live long and go far
gaelvaroquaux
0
660
技術を改善し続ける
gumioji
0
120
Ruby on cygwin 2025-02
fd0
0
180
CloudNativePGを布教したい
nnaka2992
0
110
color-scheme: light dark; を完全に理解する
uhyo
7
490
バッチを作らなきゃとなったときに考えること
irof
2
530
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Building Applications with DynamoDB
mza
93
6.2k
Why Our Code Smells
bkeepers
PRO
336
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
We Have a Design System, Now What?
morganepeng
51
7.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
A designer walks into a library…
pauljervisheath
205
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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) - メソッドチェインのフォーマットの改善 - 多くのフォーマットのバグの修正 - リリース時期は未定だができるだけ早くやりたい