JetBrains IDE で react-i18next の補完をできるようにする

こんにちは！
KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。

私は普段の Web フロントエンド開発に、JetBrains 社が提供する WebStorm を使用しています。
JetBrains の IDE はデフォルトの状態でも非常に優秀で、補完も大体の場合にはちゃんと効くのですが、多言語化対応の開発をしている際に react-i18n-next の補完が効かずに困ったことがありました。

通常、プロダクトの多言語化対応では非常に多くの翻訳を追加する必要があり、補完が効かない状態で開発するのはかなりしんどいです。
例えば、このキーの翻訳が無い言語はどれだっけ？と思ったときにいちいち辞書を grep しなければいけないと考えたら、しんどさの想像が付きやすいかと思います。

今回の記事では、WebStorm などの JetBrains IDE から react-i18n-next の補完が効くようにして、上記の問題を解消する方法を書いていきます。

前提

• React / react-i18n-next の初歩的な扱い方を理解していること
• I18n Support plugin を WebStorm にインストール済みであること

ディレクトリ構成

この記事では、以下のディレクトリ構成を前提に話を進めていきます。
特に変わったことはしておらず、Vite で React のプロジェクトを作成した後に src/locales に翻訳ファイルを置いただけです。

.
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│  └── vite.svg
├── README.md
├── src
│  ├── App.css
│  ├── App.tsx
│  ├── assets
│  │  └── react.svg
│  ├── index.css
│  ├── locales
│  │  ├── en.json
│  │  └── ja.json
│  ├── main.tsx
│  └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

なお、翻訳ファイルは以下のように最低限の翻訳が入っております。

src/locales/ja.json

{
  "こんにちは世界": "こんにちは世界"
}

src/locales/en.json

{
  "こんにちは世界": "Hello World"
}

react-i18n-next の補完が効くようにする

以下の手順で、react-i18n-next の補完が効くようになります。

1. i18n Plugin Configuration を開く

Cmd + Shift + A を入力して Find Action を開いてから i18n と入力するとすぐに開けます。

2. Default namespace に辞書のファイル名をカンマ区切りで入力する

元々 Default namespace は何も入力されていませんが、この状態だと補完が効きません。
ここに、補完の対象にしたい辞書のファイル名(拡張子を除く)を入力してください。
今回の場合、src/locales/ja.json と src/locales/en.json が補完対象なので、ja,en と入力します。

お疲れ様でした！
これで Web Storm 上で react-i18n-next の補完が効くようになります。
イメージが湧きやすいように、具体的にどのように変化するかを gif で掲載しておきます。

Before

なにも補完が効かず、不便な状態です。

After

キーの補完が効き、さらに翻訳にもジャンプができるようになり、非常に便利になりました。

まとめ

この記事では、WebStorm などの JetBrains IDE で react-i18next の補完ができるようにする方法について書きました。
だいぶニッチな記事にはなってしまいましたが、この記事がどなたかの参考になれば幸いです！

もっとアルダグラムエンジニア組織を知りたい人、ぜひ下記の情報をチェックしてみてください！