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 の TypeScript 3.7 対応について
Search
sosukesuzuki
October 29, 2019
Programming
0
390
Prettier の TypeScript 3.7 対応について
2019年10月29日の nihonbashi.js での登壇です。
10月上旬に公開された TypeScript 3.7 のベータ版の Prettier のサポート状況についてお話しました。
sosukesuzuki
October 29, 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 のしくみ
sosukesuzuki
4
2.5k
Other Decks in Programming
See All in Programming
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
PRレビューのお供にDanger
stoticdev
1
230
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Facilitating Awesome Meetings
lara
52
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Adaptive Systems
keathley
40
2.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Transcript
Prettier の TypeScript 3.7 対応について nihonbashi.js 2019/10/29
自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier
メンテナ - 筑波大学情報科学類
None
Prettier とは
Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML /
CSS / YAML / GraphQL などに 対応
フォーマット
TypeScript 3.7 とは
TypeScript 3.7 - 10月に入ってベータ版が公開されたまだ正式リリースされてない最新版の TypeScript - 4つの新構文が追加される - (このLTではこれらの機能自体には詳しく触れません) -
https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/
TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3
のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Nullish Coalescing Operator - 現在 ECMAScript Stage
3 のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない -
返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる
TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった -
class field の declare キーワードをつけられる
これらに対して Prettier 側が すべき対応は大きく分けて2つ
①依存しているパーサーの更新
Prettier のしくみ(めっちゃ簡潔に) もとのテキスト AST(抽象構文木) フォーマットされたテ キスト パース プリント
Prettier は外部のパーサーを使っている - TS: typescript-eslint/typescript-estree - JS: babel/parser - まずパーサー側が対応するのを待つ必要がある
パーサー側の TS 3.7 対応が終わったら 依存しているバージョンをあげる
②プリントの処理を書く
ASTから実際にコードを フォーマットする処理を書く (このLTではここの詳細には触れません)
雑に一部抜粋(do 式と break のフォーマット)
プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing
には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった
今回困難だったのは 「①依存しているパーサーの更新」
Node バージョン問題
Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に
“prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている
typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"
Node 6 はサポートされてない (個人的にはそろそろ Prettier が Node 6 のサポートを切るべきだと思いますが)
普通に更新してみたら Node 6 で テストコケた!
切りたいけどメジャーバージョンを あげないと Node 6 のサポートを切れない!
大きく分けて2つの対策が考えられる
① babel-ts パーサーの導入
babel-ts パーサー - Babel の TypeScript パーサーを使おうという話 - TS 3.7
が公開される前から babel-ts パーサーを入れる PR は出ていた - Babel にはもともと Optional Chaining と Nullish Coalescing は入っているのでい けるのでは? - (1.19には入らなさそう) - Assertion Functions と class フィールドの declare キーワードはまだ babel/parser が対応してないので使えない - なのであくまで回避策
② typescript-estree をなんとかする
案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修
正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」
案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node
6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの?Semver は?」
案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」
バージョン指定してインストールする ものに関してはトランスパイルして Node 6 をサポートするので Semver は守れる
投票の結果...
レビューを経て...
Merged!!
1.19.0 に入ります (今も多分 prettier/prettier でインストールすれば使えます)