トーク

コンポーネントに CSS を当てる手法の1つに、CSS Modules があります。広く使われている手法ですが、エディタ上の開発体験が悪いという欠点がありました。*.tsx と *.module.css の Language Server が分かれているために、*.tsx と *.module.css を横断する言語機能 (Rename,Find All References ) の挙動に問題があるのです。

長らくこの問題は解決困難と思われてました。しかし TypeScript Language Service Plugin を使うと、実は解決できるのです。この発表では、TypeScript Language Service Plugin とは何か、そしてそれを使って作ったツールについて紹介します。

• TypeScript Language Service Plugin とは
• CSS Modules Kit の紹介
• Volar.js を使って .module.css を TypeScript コードに偽装する
• Navigation 機能の実装 (Go to Definition, Rename, Find All References)
• 壊れかけのファイルをサポートする
• エディタにエラーを表示するには
• Code Action と Applicable Refactor の実装