styled-componentsのvscode拡張(v1.7.8)が動かないのを解決する

2023/06/23に公開

結論

tsを最新にする

ni -D typescript@latest

niコマンドはnpm/yarn両方対応するやつ

https://github.com/antfu/ni

原因

  • vscode-styled-components v1.7.8 はts 5.xしか対応してない
    • つまりts 4.x以下に対応してない
  • vscodeの設定で、projectのtsdkを読み込む設定をしていると、プロジェクトのtsが4.x以下の時に拡張が動かなくなる
{
  "typescript.tsdk": "./node_modules/typescript/lib",
}
  • TypeScriptはv3.0以降互換性を保ったまま(破壊的変更はほとんどなし)なのでとっととバージョンアップする
    • もちろんnpx tsc --noEmitで型チェックする
    • 追記: ただしstorybook v6.5が壊れたので、そこの対応が必要

参考リンク

issue

https://github.com/styled-components/vscode-styled-components/issues/421

トラブルシューティング

https://github.com/styled-components/vscode-styled-components/tree/main#intellisense-is-not-working

Discussion