VSCodeでReactのソースコードを読むための準備

何が大変か？

VSCodeはMSが作っているだけあってTypeScript統合がほぼ整っており、特に設定を頑張らなくてもそのままIDE機能が効くことが多いです。現代の多くのJavaScriptプロジェクトはこれで事足ります。

しかし、これには例外があります。Reactの実装は現時点ではFlowで書かれています。FlowはTypeScriptと同様のコンセプトを持つAltJS言語です。FlowはReactと同じくMeta(Facebook)製であるため、これまでReactでFlowが使われてきたのは一定の合理性があると言えるでしょう。

Flowの拡張子が *.js であることから、TypeScriptのIDE機能はFlowのソースコードに対しても反応します。文法が似ていることもあり、Go To Definitionなどの機能もある程度までは動作しますが、完全ではありません。また、エラー表示がうるさくてノイズになるという問題もあります。

こうした背景から、Reactのソースコードを読むときはTypeScriptではなくFlowの環境を整備したほうが良いことになります。

Flowのインストール

Flowの処理系はReactのソースコード内で yarn install をすると入るため、特別なインストール作業は不要です。

Flow Language Supportのインストール

Flow側のガイドにもあるように、Flow Language Supportを入れましょう。Flow Language SupportはFlowの設定ファイルの有無に応じて自動的に自身を有効化するため、とりあえず入れておいて損はあまりありません。

その設定ファイルは次の項目で生成します。

Flowの設定を生成する

Flowの設定は ./.flowconfig に配置しますが、Reactの場合は .flowconfig を自動生成するスクリプトがあるため、それを使う必要があります。

.flowconfig の自動生成はFlowによる型チェックを呼び出すラッパースクリプト内に仕込まれているため、以下のコマンドでFlowを呼び出すことで設定を生成できます。

yarn flow dom-node

ReactではプライマリレンダラごとにFlowの設定が異なるため、どれかひとつを選択して適用することになります。上記の例では dom-node の設定を適用しています。

TypeScriptを無効化する

Flowのプログラムは拡張子 *.js を使うため、TypeScript拡張が反応してしまいます。FlowとTypeScriptの文法は似ているため部分的には動作しますが、TypeScriptでは *.js でTypeScriptの独自文法が使われたときはエラー扱いになるため、基本的にはコードリーディングの邪魔になってしまいます。

Ctrl+P (Cmd+P) → > でコマンド検索ペインを起動し、 "Preferences: Open Workspace Settings (JSON)" を探します。 .vscode/settings.json が開くので、以下の内容を入力します。

{
  "javascript.validate.enable": false
}

これでTypeScriptが無効化できました。

おわり

Happy code reading!