VSCodeを使ってWeb開発などを進めていると、コンポーネントのファイル名などを後から変更したくなることがありますよね。例えば、homeHero.js を HomeHero.js のように、大文字/小文字だけを変更した場合。
そんな時、他のファイルからのimport文で、以下のような警告 (ts1261) が表示されて困った経験はありませんか？
Already included file name ‘src/components/home/HomeHero.js’ differs from file name ‘src/components/home/homeHero.js’ only in casing. The file is in the program because: Imported via “./home/HomeHero” from file ‘src/components/Layout.js’ Root file specified for compilationts(1261)
（ファイル名 ‘src/components/home/HomeHero.js’ は、ファイル名 ‘src/components/home/homeHero.js’ と大文字/小文字の区別のみが異なりますが、すでに含まれています。）
パスの指定は間違っていないし、Gitのcore.ignorecase設定も確認済み…。それでも警告が消えない場合、それはエディタ（VSCode）内部のキャッシュや認識の問題である可能性が高いです。
この記事では、この厄介な警告を簡単に解消する方法を紹介します。
解決策：VSCodeのウィンドウを再読み込み (Developer: Reload Window)
結論から言うと、多くの場合、VSCodeのウィンドウを再読み込みするだけでこの警告は解消します。
手順：
- VSCode上で Ctrl + Shift + P (Macの場合は Cmd + Shift + P) を押して、コマンドパレットを開きます。
- コマンドパレットに「
Developer: Reload Window」と入力し、表示されたコマンドを実行します。
これだけでVSCodeのウィンドウがリロードされ、ファイル名の変更が正しく認識されてimport文の警告が消えるはずです。
この「Developer: Reload Window」コマンドは、今回のファイル名変更時の警告以外にも、例えば以下のようなVSCodeのちょっとした不調時にも役立つことがあります。
- 新しいファイルを作成したのに、コード補完（IntelliSense）がうまく効 かない。
- 拡張機能を入れた後、シンタックスハイライトがおかしくなった。
- その他、エディタの動作がなんとなく不安定な時。
VSCodeの調子が悪いなと感じたら、まずは「Developer: Reload Window」を試してみるのが手軽で効果的な対処法の一つです。
おまけ: Gitのcore.ignorecase設定について
今回のimport警告(ts1261)の直接的な原因ではありませんでしたが、ファイル名の大文字/小文字変更に関連して、Git側の設定でつまずくこともあります。備忘録としてメモしておきます。
Web開発などで、ファイル名の大文字/小文字だけを変更（例: `index.js` → `Index.js`）しても、Gitがその変更を差分として認識してくれず、コミットできない、あるいはリモートリポジトリに反映されない、という問題が発生することがあります。
これは、Gitのデフォルト設定（特にWindowsやmacOS）で、ファイル名の大文字と小文字を区別しない (`core.ignorecase = true`) ようになっているためです。Gitにとっては `index.js` も `Index.js` も同じファイルだと認識されてしまうのです。
このような場合は、リポジトリの設定でGitに大文字/小文字を区別させるように変更することで解決できます。ターミナル（またはコマンドプロンプト）で、対象リポジトリのディレクトリに移動し、以下のコマンドを実行します。
git config core.ignorecase falseこのコマンドを実行すると、そのリポジトリではGitがファイル名の大文字と小文字を区別するようになり、index.js から Index.js への変更なども正しく差分として認識されるようになります。
ファイル名変更がGitに反映されなくて困った場合は、この設定を確認・変更してみてください。（※OSのファイルシステム自体が大文字/小文字を区別しない場合は、別途注意が必要です）