VSCode からの移行

このガイドは、VSCode の ReScript 拡張機能から JetBrains ReScript プラグインへの移行を支援します。キーボードショートカットの対応表、機能比較、セットアップの違いについて説明します。

キーボードショートカット対応表

以下の表は、VSCode と JetBrains IDE の主要な操作のショートカット対応表です。ショートカットキーは異なりますが、機能は同等です。

操作

VSCode

JetBrains (macOS)

JetBrains (Win/Linux)

Go to Definition

F12 / Cmd+Click

Cmd+B / Cmd+Click

Ctrl+B / Ctrl+Click

Find References

Shift+F12

Alt+F7

Alt+F7

Rename Symbol

F2

Shift+F6

Shift+F6

Format Document

Shift+Alt+F

Cmd+Opt+L

Ctrl+Alt+L

Quick Fix / Code Action

Cmd+.

Alt+Enter

Alt+Enter

Command Palette

Cmd+Shift+P

Cmd+Shift+A

Ctrl+Shift+A

Go to Symbol (File)

Cmd+Shift+O

Cmd+F12

Ctrl+F12

Go to Symbol (Workspace)

Cmd+T

Cmd+Opt+O

Ctrl+Alt+O

Toggle Line Comment

Cmd+/

Cmd+/

Ctrl+/

Toggle Block Comment

Shift+Alt+A

Cmd+Shift+/

Ctrl+Shift+/

Search Everywhere

Cmd+P (files)

Shift Shift

Shift Shift

Open Terminal

Ctrl+`

Alt+F12

Alt+F12

Trigger Completion

Ctrl+Space

Ctrl+Space

Ctrl+Space

Hover Documentation

Hover mouse

Hover / Ctrl+Q

Hover / Ctrl+Q

Surround With

--

Cmd+Alt+T

Ctrl+Alt+T

Extract Variable

--

Cmd+Alt+V

Ctrl+Alt+V

Extract Function

--

Cmd+Alt+M

Ctrl+Alt+M

Tip

JetBrains IDE には "VSCode" keymap プラグイン があり、ほとんどのショートカットを VSCode のデフォルトに変更できます。Settings > Plugins > Marketplace から "VSCode Keymap" で検索してインストールしてください。移行を大幅に楽にできます。

機能比較

JetBrains ReScript プラグインは、VSCode 拡張機能で利用可能なすべての LSP ベースの機能に加え、多数のネイティブ IDE 統合機能を提供します。

機能

VSCode 拡張機能

JetBrains プラグイン

シンタックスハイライト

TextMate grammar

JFlex レクサー + LSP セマンティックトークン（2層構造）

コード補完

LSP のみ

LSP + Postfix テンプレート + Live Templates

診断

LSP

LSP + Error Lens インライン表示

コードフォーマット

LSP

rescript format CLI 経由の LSP

リファクタリング

LSP リネーム

Rename + Extract Variable/Function + Inline + Change Signature + React コンポーネント抽出

デッドコード分析

手動の reanalyze CLI

reanalyze サーバーモードによる統合インスペクション

テストランナー

外部ターミナル

統合テストツリー UI（Jest/Vitest 自動検出）

コード生成

--

switch アーム、モジュールタイプ、make 関数、JSON コーデックの生成

Surround With

--

if/switch/try/block

Postfix Completion

--

.switch, .pipe, .log, .promise, .await など

Live Templates

--

21 種のスニペット（let, switch, @react.component, FFI バインディング）

コードインスペクション

--

重複 open、空モジュール、シグネチャ同期、スタイルリント

Project Wizard

--

12 種のプロジェクトテンプレート

Module Hierarchy

--

モジュール依存関係のビジュアルツリー

Call Hierarchy

--

Caller/Callee ツリー

セットアップの違い

Language Server

  • VSCode: ReScript 拡張機能に Language Server がバンドルされているため、追加のインストールは不要です。

  • JetBrains: プロジェクトの node_modules に @rescript/language-server をインストールする必要があります。Language Server が検出されない場合、プラグインは通知バーに ワンクリックインストールボタン を表示し、パッケージマネージャ（npm/yarn/pnpm）を自動検出してバックグラウンドでインストールを実行します。

手動でインストールする場合:

npm install -D @rescript/language-server

設定

  • VSCode: settings.json（ユーザーレベルまたはワークスペースレベル）の rescript.* 名前空間で設定します。

  • JetBrains: Settings > Languages & Frameworks > ReScript で設定します。インクリメンタル型チェック、Signature Help、Inlay Hints、コンパイルステータス表示などのオプションがあります。

キーマップ

VSCode のキー操作に慣れている場合は、VSCode Keymap プラグインをインストールしてください:

  1. Settings > Plugins > Marketplace を開く

  2. "VSCode Keymap" を検索する

  3. Install をクリックして IDE を再起動する

これにより、ほとんどの主要なショートカットが VSCode と同じキーに変更されます。

JetBrains 限定の機能

以下の機能は JetBrains ReScript プラグインでのみ利用可能で、VSCode 拡張機能には対応する機能がありません:

コード編集

  • Postfix completion -- .switch, .pipe, .log, .promise, .await など

  • Live Templates -- よく使うパターン用の 21 種の組み込みスニペット（let, switch, @react.component, FFI バインディング）

  • Surround with -- 選択コードを if/switch/try/block で囲む（Cmd+Alt+T）

  • Smart Enter -- Shift+Enter で括弧やブレースを自動補完

  • Statement mover -- Alt+Shift+Up/Down でトップレベル宣言を上下に移動

リファクタリング

  • Extract Variable (Cmd+Alt+V) -- 式を let 束縛に抽出

  • Extract Function (Cmd+Alt+M) -- 選択コードを新しい関数に抽出

  • Inline Variable/Function (Cmd+Alt+N) -- 変数や関数を使用箇所にインライン展開

  • Change Signature (Cmd+F6) -- 関数パラメータを変更し、呼び出し側を自動更新

  • React コンポーネント抽出 -- JSX を新しい React コンポーネントに抽出

コード生成 (Cmd+N)

  • バリアント型から switch アームを生成

  • モジュールタイプのスケルトンと実装を生成

  • レコード型から make コンストラクタ関数を生成

  • JSON エンコーダ/デコーダ関数を生成

  • デフォルトフィールドでレコード値を生成

コードインスペクション

  • 重複 open の検出

  • 空モジュールの検出

  • .resi シグネチャ同期チェック

  • スタイルリンティング（冗長ブール式、Belt API の提案）

  • Reanalyze サーバーモード -- 高速デッドコード分析用の常駐デーモン

テストランナー

  • Jest と Vitest の自動検出による統合テストツリー UI

  • ガターアイコンからの個別テスト実行/デバッグ

Project Wizard

  • 16 種のテンプレート（Basic, Vite+React, Next.js, Electron, Hono, Cloudflare Workers など）から新規 ReScript プロジェクトを作成

ツールウィンドウ

  • Module hierarchy -- モジュール依存関係のビジュアルツリー

  • Call hierarchy -- Caller/Callee ツリー（Ctrl+Alt+H）

  • Dependency diagram -- モジュール依存関係のグラフ可視化

  • PPX expansion view -- PPX マクロの出力を確認

  • Type info panel -- カーソル位置の型を常時表示するパネル

  • REPL -- ReScript インタラクティブ実行環境

  • Package dependencies -- rescript.json の依存関係ツリーを表示

その他の機能

  • .d.ts バインディング生成 -- TypeScript 定義から ReScript external バインディングを生成

  • Worksheet モード -- .resw ファイルをインタラクティブに評価

  • スクラッチファイル -- 一時的な ReScript スニペットの作成と実行

  • 型シグネチャ検索 -- 型シグネチャで関数を検索（Shift+Shift）

  • Error Lens -- 各行の末尾に診断情報をインライン表示

  • JS/TS → ReScript 変換ペースト -- JavaScript/TypeScript コードをペースト時に ReScript に自動変換