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.7k
Prettier 2.0
https://ginzajs.connpass.com/event/162321/
の発表内容です
sosukesuzuki
February 05, 2020
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
デザインシステムと生成AIの相性について考える
sosukesuzuki
4
1.2k
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.6k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
590
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
2k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.3k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.7k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.2k
Prettier の TypeScript 3.7 対応について
sosukesuzuki
0
430
Other Decks in Programming
See All in Programming
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
280
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
140
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
What's new in Spring Modulith?
olivergierke
1
160
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
210
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
200
Leading Effective Engineering Teams in the AI Era
addyosmani
7
460
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Faster Mobile Websites
deanohume
310
31k
Building Adaptive Systems
keathley
44
2.8k
Making Projects Easy
brettharned
120
6.4k
Automating Front-end Workflow
addyosmani
1371
200k
The Cult of Friendly URLs
andyhume
79
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Visualization
eitanlees
149
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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) - メソッドチェインのフォーマットの改善 - 多くのフォーマットのバグの修正 - リリース時期は未定だができるだけ早くやりたい