高度な機能¶

これらの機能は、ReScript 開発のための追加の生産性向上ツールを提供します。

Code Lens¶

LSP Required

Code Lens は、推論された型シグネチャを関数定義の上にインライン注釈として表示します。各識別子にホバーすることなく、コンパイラが推論した型を即座に確認できます。

// (int, int) => int        <-- Code Lens annotation
let add = (a, b) => a + b

// string => string         <-- Code Lens annotation
let greet = (name) => `Hello, ${name}!`

// (array<'a>, 'a => 'b) => array<'b>   <-- Code Lens annotation
let mapArray = (arr, fn) => arr->Array.map(fn)

仕組み¶

Code Lens は LSP の textDocument/codeLens プロトコルを利用し、IntelliJ の CodeVision API に橋渡しされます:

プラグインは現在のファイルに対して rescript-language-server に codeLens リクエストを送信します
Language Server は Code Lens エントリの配列を返します。各エントリには行位置と、推論された型文字列を含む command.title が含まれます
プラグインは各エントリを TextCodeVisionEntry にマッピングし、エディタ内の対応する行の上に配置します

Code Lens の注釈は 表示専用 です --- 推論された型を表示しますが、クリックしてもアクションは実行されません。

設定¶

Code Lens の切り替え: Settings > Editor > Inlay Hints > Code Vision を開き、リストから "ReScript Type Annotations" を見つけてください
アンカー位置: 注釈は常に関数定義行の上に表示されます（トップアンカー）
ファイルタイプ: Code Lens は .res ファイルにのみ表示され、.resi インターフェースファイルには表示されません（インターフェースファイルには既に明示的な型宣言が含まれているため）

要件¶

Code Lens を使用するには Language Server が実行されている必要があります。LSP サーバーに接続されていない場合、注釈は表示されません。また、Language Server が型情報を利用できるように、プロジェクトを少なくとも一度ビルドする必要があります。

Code Lens は関数定義の直上に推論された型シグネチャを表示するため、明示的なアノテーションを追加したり各識別子にホバーしたりせずに型を確認できます。

参考

シンタックスハイライトでは、Code Lens の型注釈を支えるセマンティックトークンシステムについて説明しています。

コンパイル済み JavaScript プレビュー¶

Native

現在アクティブな ReScript ファイルのコンパイル済み JavaScript 出力を表示する専用ツールウィンドウです。ReScript ソースとその JavaScript コンパイル結果を並べて表示できます。

開き方: View > Tool Windows > Compiled JS Preview

自動更新の動作¶

プレビューパネルは以下の 2 つの状況で自動的に更新されます:

アクティブファイルの切り替え --- エディタタブを切り替えると、新しくフォーカスされた .res または .resi ファイルのコンパイル済み JS を表示するようにプレビューが更新されます
コンパイル成功時 --- ReScript コンパイラのビルドが成功すると（rescript/compilationStatus LSP 通知で検出）、プレビューがリロードされ最新のコンパイル出力が表示されます

分割表示のセットアップ¶

並列表示のワークフロー:

エディタで .res ファイルを開きます
View > Tool Windows > Compiled JS Preview を開きます
ツールウィンドウのタブをエディタの右側にドラッグして、垂直分割を作成します
ReScript コードを編集・保存すると、右側の JavaScript 出力が自動的に更新されます

ユースケース¶

コンパイル出力の理解 --- ReScript の構文（パターンマッチング、パイプ演算子、バリアント）が JavaScript にどのように変換されるかを確認できます
デバッグ --- ランタイムの動作を調査する際に、ソースと出力を比較できます
パフォーマンスレビュー --- 生成された JavaScript が効率的で期待通りであることを確認できます
学習 --- ReScript の機能が JavaScript のイディオムにどのように対応するかを理解できます

コンパイル済み JS ファイルが見つからない場合（例: プロジェクトがビルドされていない場合）、パネルにプロジェクトを先にビルドするよう促すメッセージが表示されます。

コンパイル済み JS プレビューは ReScript と JavaScript 出力のライブ並列ビューを提供し、IDE を離れることなくコンパイル結果の理解、ランタイム問題のデバッグ、パフォーマンス特性の確認に役立ちます。

モジュール階層¶

Native

任意の ReScript モジュールのモジュール構造と依存関係を表示します。

開き方: モジュール上にカーソルを置き、Navigate > Type Hierarchy (Ctrl+H) を使用します

2 つの表示モード¶

階層ブラウザには 2 つの異なるツリービューがあります:

1. モジュールのネスト

ファイル内のネストされたモジュール構造を表示します。これがデフォルトのビューです。モジュールが階層的にどのように構成されているかを表示します:

// File: Utils.res
module String = {          // <-- Root
  module Validate = {      //     child of String
    let isEmail = ...
    let isUrl = ...
  }
  module Format = {        //     child of String
    let capitalize = ...
    let truncate = ...
  }
}
module Number = {          // <-- Root
  module Parse = {         //     child of Number
    let toInt = ...
  }
}

階層ビューでは、以下のように表示されます:

Utils.res
  +-- String
  |     +-- Validate
  |     +-- Format
  +-- Number
        +-- Parse

2. モジュールの依存関係

open および include ステートメントで参照されるモジュールを表示します。このビューは、現在のファイルの外部依存関係を明らかにします:

open Belt
open Belt.Array
include SharedUtils

let process = (arr) => arr->Array.map(x => x + 1)

依存関係ビューには以下が表示されます:

MyModule.res
  +-- open Belt
  +-- open Belt.Array
  +-- include SharedUtils

ナビゲーション¶

階層ビューは以下をサポートしています:

ツールバーボタンによる Module Nesting と Module Dependencies のビュー切り替え
モジュール名によるアルファベット順のソート
ノードをダブルクリックしてソースモジュールに移動

モジュール階層ビューはファイルの内部構造と外部依存関係の両方を明らかにし、open や include 文を手動で読むことなくモジュールの構成と相互接続を容易に理解できます。

Inlay Hints¶

LSP Required

Language Server は、変数やパラメータの横に推論された型をインラインヒントとして表示します。明示的な型注釈がなくてもコードを理解しやすくなります。

let x /* : int */ = 42
let name /* : string */ = "ReScript"
let items /* : array<int> */ = [1, 2, 3]

let greet = (name /* : string */, age /* : int */) => {
  `${name} is ${age->Int.toString} years old`
}

let result /* : option<string> */ = list->List.head

設定¶

Settings > Editor > Inlay Hints > ReScript に移動してInlay Hints を設定します:

有効化/無効化 --- ReScript ファイル全体の Inlay Hints を切り替えます
Inlay Hints は Language Server によって提供されます。利用可能かどうかは LSP サーバーが接続されているかどうか、およびプロジェクトがビルドされているかどうかに依存します

Code Lens との違い¶

Code Lens は関数定義行の上に完全な関数シグネチャを表示します
Inlay Hints は各変数やパラメータの横に個別の型注釈を インラインで 表示します

どちらの機能も Language Server に依存していますが、異なる場所で異なる粒度の情報を表示します。

PPX アノテーションヒント¶

PPX アノテーションヒントは、各 @ 属性が何を生成またはバインドするかのインライン説明を表示し、ドキュメントを参照せずに PPX の動作を理解するのに役立ちます。

@react.component           // generates React.createElement
let make = (~name: string) => {
  <div> {React.string(name)} </div>
}

@module("fs")              // binds to JS module "fs"
external readFile: string => promise<string> = "readFile"

@genType                   // generates .gen.tsx
let format = (s: string) => s->String.trim

サポートされるアノテーションには @react.component、@genType、@module、@val、@send、@get、@set、@new、@deriving(json)、@deriving(accessors)、@unboxed、@scope、@string、@int、@unwrap、@return、@obj、@variadic、@as、@live、@dead、@inline が含まれます。

Settings > Editor > Inlay Hints > ReScript > PPX annotations で設定します。

インレイヒントはソースコードを煩雑にすることなく型システムを可視化します — 推論された型が各バインディングの横に控えめなアノテーションとして表示され、型推論の簡潔さと明示的な型の利点を両立できます。

rescript.json の JSON Schema¶

Native

プラグインは rescript.json および bsconfig.json 設定ファイルに対して JSON Schema バリデーションと自動補完を提供します。スキーマは ReScript ビルド設定の完全な仕様をカバーしています。

自動補完されるフィールド¶

rescript.json を編集する際、以下を含むすべてのトップレベルおよびネストされたフィールドに対して自動補完とバリデーションが利用できます:

フィールド	説明
`name`	パッケージ名（必須）
`sources`	ソースディレクトリの設定（必須）
`bs-dependencies`	ReScript パッケージの依存関係
`dev-dependencies`	開発時のみの ReScript 依存関係
`jsx`	JSX 変換設定（`version`、`module`、`preserve`）
`suffix`	出力ファイルのサフィックス（例: `.res.mjs`、`.js`）
`package-specs`	モジュール形式（`esmodule` または `commonjs`）
`namespace`	パッケージの名前空間設定
`ppx-flags`	PPX プリプロセッサマクロ
`warnings`	警告番号の設定とエラーへの昇格
`reanalyze`	デッドコード解析設定（`analysis`、`suppress`、`transitive`）
`editor`	エディタ固有の設定（自動補完拡張）
`experimental-features`	実験的なコンパイラ機能（例: `LetUnwrap`）

機能¶

自動補完 --- Ctrl+Space を押すと、任意のネストレベルで利用可能な設定キーを確認できます
バリデーション --- 無効な値はエラーマーカーでハイライトされます（例: サポートされていないモジュール形式の使用）
ホバードキュメント --- 任意のキーにホバーすると、説明と期待される型を確認できます
ネスト構造のサポート --- sources、jsx、reanalyze などのネストされたオブジェクト内での完全な補完

スキーマファイルはプラグインにバンドルされており、rescript.json または bsconfig.json という名前のファイルを開くと自動的に適用されます。

JSON Schema サポートにより rescript.json の編集が推測から案内付きの体験に変わります — 自動補完が有効な設定キーを提案し、バリデーションがコンパイラを実行する前にミスをキャッチします。

Markdown コードフェンスのハイライト¶

Native

Markdown ファイル内の ReScript コードブロックに完全なシンタックスハイライトが適用されます:

```rescript
type user = {name: string, age: int}

let greet = (user) => `Hello, ${user.name}!`
```

統合メカニズム¶

プラグインは 3 つの info-string 識別子を認識する CodeFenceLanguageProvider を登録します:

```rescript --- 主要な識別子
```res --- ReScript 実装ファイルの短縮形
```resi --- ReScript インターフェースファイルの短縮形

Markdown プラグインがこれらの識別子のいずれかを持つコードフェンスを検出すると、シンタックスハイライトを ReScript レクサーに委譲します。これにより、.res ファイルで見られるのと同じトークンレベルのハイライト（キーワード、文字列、コメント、演算子）が提供されます。

要件¶

この機能を使用するには Markdown プラグインがインストールされている必要があります。Markdown プラグインはほとんどの JetBrains IDE にバンドルされています。Markdown プラグインが存在しない場合、コードフェンスはプレーンテキストとして表示されます。

Markdown ファイル内の ReScript コードフェンスは .res ファイルと同じシンタックスハイライトを受け、ドキュメント、README、コード例が視覚的に一貫して読みやすくなります。

JavaScript Injection in %raw()¶

Native

%raw() および %%raw() ブロック内の JavaScript コードに完全な JavaScript シンタックスハイライトが適用され、ReScript ファイル内での快適な FFI（Foreign Function Interface）編集が可能になります。

let add = %raw(`
  function(a, b) {
    return a + b;
  }
`)

let timestamp = %raw(`Date.now()`)

%%raw(`
  import * as fs from 'fs';
  const data = fs.readFileSync('config.json', 'utf8');
`)

言語インジェクションメカニズム¶

プラグインは IntelliJ の MultiHostInjector API を使用して、%raw() ブロック内の文字列リテラルに JavaScript をインジェクトします:

パターン検出 --- インジェクターは、文字列リテラルの前にトークンパターン % raw (（トークン間のオプションの空白あり）が存在するかどうかをチェックします
範囲計算 --- 通常の文字列（"..."）の場合、囲んでいる引用符はインジェクション範囲から除外されます。テンプレート文字列（` ... `）の場合、文字列の全内容が使用されます
言語解決 --- インジェクターは IDE 内で "JavaScript" または "ECMAScript 6" の言語サポートを検索します

利用できる機能¶

インジェクトされた %raw() ブロック内では、以下の機能を利用できます:

JavaScript シンタックスハイライト（キーワード、文字列、数値、コメント）
JavaScript 構文エラーの基本的なエラーハイライト
JavaScript ブロック内の括弧マッチング

要件¶

この機能を使用するには、JetBrains IDE で JavaScript プラグイン（または JavaScript および TypeScript サポート）が利用可能である必要があります。IntelliJ IDEA Ultimate と WebStorm にはデフォルトで含まれています。IntelliJ IDEA Community の場合、JavaScript プラグインを別途インストールする必要がある場合があります。

%raw() 内の JavaScript インジェクションにより、FFI コードを書く際に色なしのプレーン文字列で作業するのではなく、適切な JS シンタックスハイライトとエラー検出が得られます。

RegExp Injection in %re()¶

Native

%re() ブロック内の正規表現に、シンタックスハイライト、バリデーション、括弧マッチングを含む完全な RegExp 言語サポートが提供されます。

let emailPattern = %re("/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/")

let phonePattern = %re("/^\+?[1-9]\d{1,14}$/")

let urlPattern = %re("/^https?:\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/i")

言語インジェクションメカニズム¶

プラグインは IntelliJ の MultiHostInjector API を使用して、%re() ブロック内の文字列リテラルに RegExp 言語をインジェクトします:

パターン検出 --- インジェクターは、文字列リテラルの前にトークンパターン % re ( が存在するかどうかをチェックします
範囲計算 --- 正規表現の区切り文字（/ ... /）が検出され、インジェクション範囲は区切り文字間の内容に設定されます
フラグ処理 --- 閉じ区切り文字の後の正規表現フラグ（例: i、g、m）は RegExp 言語に渡されます

利用できる機能¶

インジェクトされた %re() ブロック内では:

RegExp シンタックスハイライト（文字クラス、量指定子、グループ、アンカー）
無効な正規表現パターンのエラーハイライト
グループ ( ... ) の括弧マッチング
正規表現構文のホバードキュメント（RegExp プラグインが提供する場合）

要件¶

この機能は IntelliJ の組み込み RegExp 言語サポートを使用しており、すべての JetBrains IDE で利用できます。

RegExp インジェクションにより %re() パターン内でシンタックスハイライトとバリデーションが得られ、正規表現エラーをランタイムではなく編集時にキャッチできます。

インジェクトされた言語のフォーマット¶

Native

ReScript ファイルをフォーマット（Cmd+Option+L）すると、インジェクトされた言語フラグメント（例: %raw() 内の JavaScript）もそれぞれの言語のフォーマットルールに従ってフォーマットされます。

この機能はインジェクトされた言語のフォーマッタにフォーマットを委譲する FormattingModelBuilder を提供し、インジェクトされたコードが ReScript コードと一緒に適切にフォーマットされた状態を維持します。

ReScript ファイルをフォーマットすると、%raw() 内のインジェクトされた JavaScript もそれ自身のルールに従ってフォーマットされるため、単一のフォーマットコマンドで両方の言語がクリーンに保たれます。

Grazie 統合¶

Native

Grazie プラグインがインストールされている場合、ReScript プラグインはコメントと文字列リテラルから自然言語テキストを抽出し、文法・スペルチェックを行います。

サポートされるテキストドメイン:

コメント — 行コメント（//）、ブロックコメント（/* */）、ドキュメントコメント（/** */）が COMMENTS ドメインテキストとして抽出されます
文字列 — 文字列リテラル、テンプレート文字列、文字リテラルが LITERALS ドメインテキストとして抽出されます

これはオプションの統合です --- Grazie がインストールされていない場合、この機能は単に利用できません。

Grazie 統合により、ReScript のコメントと文字列が自然言語テキストと同じ文法・スペルチェックを受け、ツールを切り替えることなくドキュメントの品質を向上できます。

Index Pattern Builder¶

Native

ReScript ファイル用のレクサーベースのインデックスパターンビルダーを提供し、IDE の TODO/FIXME 検出を強化します。基本的なテキストベースのアプローチと比較して、コメント内のより正確なパターンマッチングを実現します。

インデックスパターンビルダーは ReScript JFlex レクサーを使用してコメントトークン（行コメント、ブロックコメント、ドキュメントコメント）を正しく分類し、TODO/FIXME パターンが文字列リテラルやコードではなく実際のコメント内でのみマッチすることを保証します。

レクサー対応の TODO 検出により偽陽性を防ぎます — 「TODO」という単語を含む文字列リテラルではなく、実際のコメント内の TODO のみがインデックスされます。

Element Signature Provider¶

Native

IDE の再起動をまたいでエディタの折りたたみ状態を永続化する安定した要素シグネチャを提供します。エディタでコードブロックを折りたたむと、ファイルの変更後も維持されるシグネチャ形式（TYPE#name#offset）を使用してその折りたたみ状態が記憶されます。

これによりコード折りたたみの設定が IDE セッション間で永続化されます — 折りたたんだブロックは編集や再起動後もそのまま維持されます。

プロジェクトウィザード¶

Native

フロントエンド、バックエンド、サーバーレス、モバイルなどをカバーする 16 の事前設定済みテンプレートを使用して、IDE から直接新しい ReScript プロジェクトを作成します。

手順¶

File > New > Project
左側のジェネレーターリストから ReScript を選択します
プロジェクト設定を構成します:
- プロジェクト名 と 保存場所
- テンプレート --- カテゴリ別にグループ化された 16 のプロジェクトテンプレートから選択します
- パッケージマネージャ --- npm、pnpm、yarn、または bun から選択します
- バリデーションライブラリ --- zod と sury から選択します。全テンプレートがこの選択を Validation.res に反映し、テンプレートごとに異なる入力（HTTP ボディ、CLI オプション、フォーム入力、IPC ペイロード、設定ファイル、public API 引数）を検証します。
Create をクリックしてプロジェクトを生成します

利用可能なテンプレート¶

カテゴリ	テンプレート	説明
Basic	Basic	コンソール出力付きの最小限の ReScript プロジェクト
Frontend	Vite + React	Vite バンドラーを使用した React シングルページアプリケーション
Frontend	Next.js	Next.js を使用したサーバーサイドレンダリング React アプリケーション
Desktop	Electron	Electron を使用したクロスプラットフォームデスクトップアプリケーション
Backend	Hono (Node.js)	Node.js 上の Hono フレームワークによる軽量 Web サーバー
Backend	Hono GraphQL	`graphql-yoga` を `/graphql` にマウントした Hono サーバー。GraphiQL UI と Drizzle による永続化を備える
Serverless	Cloudflare Workers	Hono を使用した Cloudflare Workers 上のサーバーレス API
Serverless	AWS Lambda	Hono を使用した AWS Lambda 上のサーバーレス関数
Serverless	Google Cloud Run	Hono を使用した Google Cloud Run 上のコンテナベースサービス
Mobile	React Native (Expo)	React Native と Expo を使用したモバイルアプリケーション
Mobile	React Native (Community CLI)	React Native Community CLI（bare workflow）を使用したモバイルアプリ。ネイティブの Android/iOS プロジェクトに直接アクセス可能。
Library	npm Library	TypeScript 利用者向けの `@genType` 付き公開可能な npm パッケージ
Tool	CLI Tool	引数解析付きのコマンドラインツール
Full Stack	Monorepo (Hono + React)	Hono バックエンドと React フロントエンドのフルスタック Monorepo
Full Stack	Full-Stack (single package)	Monorepo の単一パッケージ版: 1 つの `package.json` で Hono バックエンドと Vite+React クライアントを同居させる
Full Stack	res-x (Bun 上の HTMX)	`rescript-x` の JSX と HTMX で構築するサーバ駆動型 Web アプリ。Bun + Vite 上で動作する

テンプレートごとの詳細ページ (生成レイアウト、依存関係、主要ファイル、スクリプト、2 日目以降のレシピ) については、プロジェクトテンプレートを参照してください。

生成されるプロジェクト構造¶

各テンプレートは rescript.json、package.json、およびテンプレート固有のソースファイルを含む、すぐに使えるプロジェクトを生成します。

Basic テンプレート:

my-project/
+-- rescript.json
+-- package.json
+-- src/
    +-- App.res

Vite + React テンプレート:

my-project/
+-- rescript.json
+-- package.json
+-- index.html
+-- vite.config.mjs
+-- src/
    +-- App.res
    +-- Main.res

Monorepo テンプレート:

my-project/
+-- package.json            # Root with workspaces
+-- packages/
    +-- shared/
    |   +-- rescript.json
    |   +-- package.json
    |   +-- src/Types.res
    +-- server/
    |   +-- rescript.json
    |   +-- package.json
    |   +-- src/Server.res
    +-- client/
        +-- rescript.json
        +-- package.json
        +-- src/App.res

テンプレートの詳細¶

React ベースのテンプレート（Vite+React、Next.js、Electron、React Native (Expo)、React Native (Community CLI)）は rescript.json の JSX 設定と React 依存関係を含みます。

React Native (Community CLI) は、ネイティブの android/ と ios/ プロジェクトに直接アクセスしたい Android Studio / Xcode ユーザーを対象としています。このテンプレートには JavaScript/TypeScript + ReScript の部分と .res.mjs を解決する metro.config.js のみが含まれており、ネイティブプロジェクト自体はプロジェクト作成後に @react-native-community/cli を実行して生成します。src/NativeGreeting.res は、@module("react-native") @scope("NativeModules") 経由でカスタム Kotlin/Swift NativeModule をバインドする方法を示していますが、Kotlin/Swift の実装自体はテンプレートの範囲外であり、公式 React Native ドキュメントに従って記述する必要があります。

Hono ベースのテンプレート（Hono、Hono GraphQL、Cloudflare Workers、AWS Lambda、Google Cloud Run）は共通の Hono バインディング（src/Hono.res）を共有し、デプロイ設定が異なります:

Hono (Node.js) --- ローカル開発に @hono/node-server を使用
Cloudflare Workers --- wrangler.jsonc 設定を含む
AWS Lambda --- esbuild バンドルと Lambda アダプターバインディングを含む
Google Cloud Run --- コンテナ化デプロイ用の Dockerfile を含む

npm Library は TypeScript 型定義を生成するための @genType 設定を含みます。

CLI Tool は package.json の bin エントリと Process.argv による引数解析を含みます。

バリデーションライブラリ¶

全 16 テンプレートに Validation.res モジュールが同梱されており、バックエンドは バリデーションライブラリ ウィザードオプションで zod（デフォルト）または sury（ReScript ネイティブ）から選択できます。関数シグネチャはバックエンドに関わらず parseXxx: <input> => result<T, string> で共通のため、呼び出し側がライブラリ選択で分岐する必要はありません。各テンプレートが検証するのはそれぞれの入力境界の形に対応します:

テンプレート	検証対象
Hono / Hono GraphQL / AWS Lambda / Cloudflare Workers / Google Cloud Run / Next.js / Full-Stack / Monorepo / res-x	受信する HTTP JSON ボディ（失敗時は HTTP 400 を即返す）
CLI Tool	`init --name / --dir` サブコマンドのオプション
npm Library	JS/TS 呼び出し元からの public API 引数
Basic	`--config` 指定時の `config.json` の shape
Electron	main プロセスから返される IPC レスポンス
React Native (Expo) / React Native (Community CLI)	フォームの draft todo 入力
Vite + React	fetch 呼び出し前の greet フォーム入力

プロジェクト作成後¶

ウィザードがプロジェクトを作成した後:

パッケージマネージャの install コマンド（例: pnpm install）を実行して依存関係をインストールします
rescript build を実行（または ReScript 実行構成を使用）してプロジェクトをコンパイルします
node_modules に @rescript/language-server が利用可能になると、Language Server が自動的に起動します

開発者体験の向上¶

生成される各プロジェクトには共通のベースラインが同梱されており、すぐにコーディングを開始できます:

README.md — 前提条件、選択したパッケージマネージャ向けに調整されたインストール/開発コマンド、テンプレート固有のデプロイ手順 (例: Cloudflare Workers の wrangler deploy、AWS Lambda アップロード、Cloud Run の gcloud run deploy) を記載
.gitignore — node_modules/、ReScript ビルド成果物、OS ファイル、テンプレート固有の出力 (.next/、dist/、.wrangler/ など) を除外
.editorconfig — インデント (スペース 2) と改行コード (LF) を固定
.github/workflows/ci.yml — 依存関係をインストールして rescript を実行する最小限の CI パイプライン。テンプレートが定義している場合は build / test スクリプトも実行
package.json の packageManager フィールド — Corepack 向けにツールチェインのバージョンを固定し、コラボレーターが同じパッケージマネージャを使えるようにする
Vitest スモークテスト + カバレッジ — すべてのテンプレートに src/__tests__/*.test.mjs (またはワークスペース相当) と test / test:coverage スクリプト (@vitest/coverage-v8 提供) が同梱されています。Monorepo は pnpm -r run test / yarn workspaces foreach / npm --workspaces run test --if-present でワークスペース横断に実行し、React Native は Node では react-native を読み込めないためファイルシステムスモークテストを、Hono 系テンプレは Hono 内蔵の app.request() ハーネスで DB フリーのベースラインルートを検証します
.nvmrc / LICENSE / .github/dependabot.yml — すべてのテンプレートが Node メジャーバージョンを固定し、プロジェクト名を著作権者とする MIT ライセンスを同梱、Dependabot を npm + GitHub Actions の依存を週次でポーリングするよう設定しています
.env.example — 環境変数を読むテンプレート (Hono REST、Hono GraphQL、Full-Stack、Monorepo サーバー、Google Cloud Run) は期待されるキー (DATABASE_URL、PORT 等) を記載した .env.example を同梱します。値を入れた .env は .gitignore で除外されるため誤ってコミットされません
Hono app.onError グローバルハンドラ — Hono 系テンプレート (REST、GraphQL、Full-Stack、Monorepo サーバー) は app.onError で例外をログに出力して JSON 500 を返すよう配線されており、未処理例外がクライアントに生のスタックトレースを漏らすことがありません
依存バージョンの一元管理 — すべてのテンプレートのバージョンは wizard/templates/TemplateVersions.kt に集約されており、夜間の GitHub Actions ジョブ (integration-tests.yml) が各テンプレートが引き続きインストール・コンパイル可能であることを検証します

Vite+ ツールチェイン (Vite + React、Electron、Monorepo)¶

Vite + React、Electron、Monorepo の各テンプレートは Vite+ (vite-plus) を使用しています — Vite、Vitest、Oxlint、Oxfmt、Rolldown をまとめた統合ラッパーです。スクリプトは vp dev、vp build、vp test などで公開されます。

既知の問題: Vite+ は pre-1.0 であり、現在 pnpm のネストされたストア経由では @vitejs/plugin-react とうまくリンクしないため、vp build が vite/internal の ERR_MODULE_NOT_FOUND で失敗することがあります。回避策として、vite.config.mjs の vite-plus を vite に置き換え、npm スクリプトを vite / vite build に切り替えてください。Vite+ が安定した後は 1 行の変更で戻せます。

プロジェクトウィザードにより数秒で完全に設定された ReScript プロジェクトを作成できます — テンプレートを選択し、パッケージマネージャを選び、設定ファイルを手動で書くことなくビルド可能なプロジェクトを取得できます。

ファイルテンプレート¶

Native

コンテキストメニューから、事前に記入されたボイラープレートコード付きの新しい ReScript ファイルを作成します。

使い方¶

Project パネルでディレクトリを右クリックします
New > ReScript File を選択します
ファイル名（拡張子なし）を入力します
ドロップダウンからテンプレートを選択します

利用可能なテンプレート¶

Module --- モジュールコメントヘッダー付きの .res ファイルを作成します:

// MyModule module

Interface --- コメントヘッダー付きの .resi インターフェースファイルを作成します:

// MyModule interface

Component --- React コンポーネントのボイラープレート付きの .res ファイルを作成します:

@react.component
let make = () => {
  <div> {React.string("MyComponent")} </div>
}

すべてのテンプレートにおいて、入力したファイル名が自動的にテンプレートの内容に置換されます。Component テンプレートは React プロジェクトで特に便利で、すぐに使える JSX 付きの関数コンポーネントが提供されます。

テンプレートのカスタマイズ¶

ファイルテンプレートは Settings > Editor > File and Code Templates でカスタマイズできます。Internal タブで "ReScript" で始まる名前のテンプレートを探してください。IntelliJ のテンプレート変数構文（例: ${NAME} でファイル名）を使用してテンプレートの内容を変更できます。

ファイルテンプレートにより新しいモジュール、インターフェース、React コンポーネントの一貫した出発点が得られ、既存ファイルからボイラープレートをコピーすることなくすべての新規ファイルが同じパターンに従います。

.d.ts バインディング生成¶

Native

TypeScript .d.ts 定義ファイルから ReScript external バインディングコードを生成します。FFI 宣言を手動で記述する煩雑な作業を自動化します。

使い方¶

Project パネルで .d.ts ファイルを右クリックします
Generate ReScript Binding を選択します
プラグインが TypeScript Compiler API を使用してファイルを解析し、バインディング宣言を含む .res ファイルを生成します

このアクションは .d.ts ファイルを開いているときのエディタコンテキストメニューからも利用できます。

サポートされる構文¶

TypeScript	ReScript 出力
`function`	`@module external fn: params => ret = "fn"`
`interface`	レコード型 `type t = { field1: string, field2?: int }`
`class`	`@new`、`@get`、`@send` external 付きモジュール
`type` エイリアス	`type t = typeStr`
`enum`（文字列）	ポリモーフィックバリアント `type t = [#"a" \| #"b"]`
`enum`（数値）	`@inline let` 定数付きモジュール
`const` / `let`	`@module external name: type = "name"`

型マッピング¶

TypeScript	ReScript
`string`	`string`
`number`	`float`
`boolean`	`bool`
`void`	`unit`
`any` / `unknown`	`JSON.t`
`T \| null`	`Nullable.t<T>`
`T \| undefined`	`option<T>`
`Array<T>` / `T[]`	`array<T>`
`Promise<T>`	`promise<T>`
`Record<string, T>`	`Dict.t<T>`
`[A, B, C]`	`(A, B, C)`
`(a: A) => B`	`A => B`
文字列リテラルユニオン	`@string` 付きポリモーフィックバリアント

要件¶

Node.js が PATH に存在するか、Settings で設定されている必要があります
TypeScript がプロジェクトの node_modules にインストールされている必要があります（プラグインは Monorepo サポートのため親ディレクトリも検索します）

制限事項¶

以下の TypeScript 構文はまだサポートされておらず、/* TODO */ コメントが生成されます:

条件型とマップ型
テンプレートリテラル型
制約付きの複雑なジェネリクス
交差型（JSON.t にフォールバック）
オーバーロードされた関数シグネチャ（最初のシグネチャを使用）
宣言マージ

TypeScript ライブラリの ReScript FFI バインディングを書くことは ReScript 開発で最も面倒なタスクの一つです — このジェネレータは変換を自動化し、ゼロから書くのではなく洗練できる正しい external 宣言を生成します。

カラープレビュー¶

Native

ReScript コード内のカラー値に対して、エディタガターにインラインカラースウォッチが表示されます:

16 進数カラー: "#ff0000"、"#f00"
RGB: "rgb(255, 0, 0)"
HSL: "hsl(0, 100%, 50%)"

スウォッチをクリックするとカラーピッカーが開きます。

let primaryColor = "#3498db"
let errorColor = "rgb(231, 76, 60)"
let successColor = "hsl(120, 39%, 49%)"

文字列リテラル内のカラー値が検出され、対応する行の横のエディタガターに小さなカラースウォッチが表示されます。

インラインカラースウォッチによりアプリケーションを実行せずに色の値を視覚的に確認でき、hex、RGB、HSL コードの横に実際の色が表示され、クリックしてカラーピッカーで調整できます。

VCS Code Vision¶

Native

トップレベル宣言（let、type、module、external）に作成者と最終変更の注釈が表示され、エディタ内で直接 Git blame 情報を確認できます。Settings > Editor > Inlay Hints > Code Vision で有効化します。

宣言上の VCS アノテーションにより各関数や型を最後に変更した人が表示され、git blame を別途実行せずに不慣れなコードについて誰に尋ねればよいかが分かります。

パッケージ依存関係¶

Native

rescript.json の dependencies と devDependencies を表示する専用ツールウィンドウです:

開き方: View > Tool Windows > ReScript Dependencies

ツリービューはパッケージを "Dependencies" と "Dev Dependencies" のグループにバージョン番号付きで整理します。

パッケージ依存関係ビューにより rescript.json を開いたり npm list を実行したりせずに、プロジェクトの ReScript 依存関係とバージョンの概要を素早く確認できます。

Quick Documentation¶

LSP Required

Ctrl+Q（またはホバー）を押して ReScript 要素のドキュメントを表示します。LSP サーバーが接続されている場合、ドキュメントは Language Server から提供されます。LSP が利用できない場合は、PSI ベースのフォールバックが宣言の型、名前、ソースファイルを表示します。

Quick Documentation は現在の位置から離れることなく型情報とドキュメントコメントを表示し、コーディング中にインラインで API を理解できます。

Safe Delete¶

Native

Refactor > Safe Delete を使用して、使用箇所チェック付きで ReScript 宣言を削除します。要素がまだ参照されている場合、続行前にすべての使用箇所を示す確認ダイアログが表示されます。

Safe Delete は宣言を削除する前に参照をチェックして偶発的な破損を防ぎ、隠れた依存関係を心配することなく自信を持ってコードをクリーンアップできます。

名前候補の提案¶

Native

リネームリファクタリング時に、プラグインは以下に基づいて名前を提案します:

要素の型（例: User.t に対して user）
含まれるファイル名
snake_case から camelCase への変換

インテリジェントな名前提案によりコンテキストに適切な名前を提案してリネームリファクタリングを高速化し、ゼロから考え出すのではなくリストから良い名前を選べます。

Reader Mode¶

Native

node_modules/ ディレクトリ内のファイルは自動的に Reader Mode で表示され、ライブラリソースファイルのクリーンな読み取り専用ビューを提供します。

Reader Mode はライブラリのソースファイルをクリーンで気が散らない表示にし、依存関係の動作を探索する際にサードパーティコードを読みやすくします。

TODO インデキシング¶

Native

プラグインは IntelliJ の TODO ツールウィンドウ（Alt+6 > TODO タブ）と統合し、ReScript ファイル内の TODO、FIXME、およびその他のタスクコメントを検出してリスト表示します。

認識されるパターン:

// TODO: ...
// FIXME: ...
/* TODO: ... */

TODO 項目は IDE の TODO パネルに、プロジェクト内の他のファイルタイプの項目と共に表示されます。TODO パターンとフィルタは Settings > Editor > TODO でカスタマイズできます。

TODO インデキシングにより ReScript のタスクコメントが IDE の統合 TODO パネルに取り込まれ、すべての言語にわたる未完了の作業を一箇所で追跡できます。

Open ステートメントインデックス¶

Native

プラグインはプロジェクト全体のすべての open ステートメントをインデックス化し、高速なモジュール解決を実現します。自動インポート候補やモジュール依存関係分析などの機能を支えています。

open 文インデックスによりプロジェクト全体で即座にモジュール検索が可能になり、リクエストごとにファイルをスキャンすることなく自動インポートと依存関係分析を実現します。

Project View の拡張¶

Native

インターフェース表示: 対応する .resi を持つ .res ファイルにはインターフェースインジケーター: 対応する .resi を持つ .res ファイルに "(has .resi)" サフィックスを表示
バージョン表示: rescript.json にその内容から ReScript バージョンを表示
コンパイル済み JS のネスト: コンパイル済み JS ファイル（.res.js/.mjs/.cjs、.bs.js/.mjs/.cjs）が Project パネルで対応する .res ソースファイルの下にネスト表示され、視覚的な混乱を軽減します
コンパイル済み JS のグレー表示: ネストされたコンパイル済み JS ファイルはグレーのテキストで表示され、生成された出力とソースファイルを視覚的に区別します

Project View の拡張により、生成されたファイルをソースの下にネストし、インターフェースの有無や ReScript バージョンなどの有用なメタデータを表示して視覚的な混乱を減らし、ファイルツリーがソースコードに集中できます。

自動インポートオプション¶

Native

Settings > Editor > General > Auto Import で自動インポートの動作を設定します:

open ステートメントの自動挿入の切り替え
特定のモジュールを自動インポートから除外

きめ細かな自動インポート設定により、どのモジュールが自動的に open されるかを制御でき、不要なインポートがファイルを散らかすのを防ぎます。

式の型表示¶

LSP Required

Ctrl+Shift+P（macOS では Cmd+Shift+P）を押すと、カーソル位置の式の推論された型を表示します。

let add = (a, b) => a + b
// Place caret on "add", press Ctrl+Shift+P
// Shows: (int, int) => int

型情報は LSP の textDocument/hover リクエストを介して Language Server から取得されます。LSP が接続されていない場合、型情報が利用できない旨のメッセージが表示されます。

Tip

明示的な型注釈を追加せずにサブ式の型を素早く確認したい場合に便利です。Inlay Hints（型を常時表示する）とは異なり、Expression Type はオンデマンドで動作し、宣言だけでなく任意の式に対して使用できます。

Expression Type は任意の式に対するオンデマンドの型検査を提供します — 永続的なインレイヒントと異なり、必要な時だけ呼び出すことでエディタをクリーンに保ちつつ型情報に即座にアクセスできます。

Type Info ツールウィンドウ¶

LSP Required

現在のキャレット位置の式の推論された型を常時表示する永続的なツールウィンドウです。オンデマンドで型を表示する Expression Type（Ctrl+Shift+P）とは異なり、Type Info ツールウィンドウはコードをナビゲートするたびに自動更新されます。

開き方: View > Tool Windows > ReScript Type

仕組み¶

ReScript ファイル内でキャレットを移動すると、ツールウィンドウは現在の位置に対して LSP textDocument/hover リクエストを送信します
レスポンスはデバウンスされ、高速なナビゲーション中の過剰なリクエストを回避します
推論された型がツールウィンドウパネルに表示され、リアルタイムで更新されます

ユースケース¶

不慣れなコードの探索 --- ショートカットを押さずに型を継続的に確認できます
型エラーのデバッグ --- 式を移動して型がどこで分岐するかを理解できます
ReScript の学習 --- 型システムがさまざまな式に対してどのように型を推論するかを観察できます

要件¶

Type Info ツールウィンドウを使用するには Language Server が実行されている必要があります。LSP が接続されていない場合、パネルに "No type information available" メッセージが表示されます。

Type Info ツールウィンドウはコードをナビゲートする際に常時型を可視化します — ショートカットが必要な Expression Type と異なり、このパネルは自動更新されるため、不慣れなコードベースの探索に最適です。

LSP 自動インストール¶

Native

@rescript/language-server がインストールされていない ReScript プロジェクトを開くと、プラグインがワンクリックインストールボタン付きの通知を表示します。

通知アクション¶

アクション	説明
npm/yarn/pnpm でインストール	検出されたパッケージマネージャを使用して `@rescript/language-server` を devDependency としてインストールします
Configure...	カスタム LSP パスを設定するための ReScript 設定ページを開きます
Don't show again	現在のセッションで通知を非表示にします

インストールはプログレスインジケーター付きでバックグラウンドで実行されます。成功すると Language Server が自動的に起動し、IDE の再起動は不要です。

通知は以下の条件をすべて満たす場合にのみ表示されます:

プロジェクトに rescript.json または bsconfig.json が含まれている
Settings にカスタム LSP パスが設定されていない
node_modules に Language Server が見つからない

LSP 自動インストールは最も一般的なセットアップの障壁を取り除きます — npm コマンドを手動で実行してパスを設定する代わりに、ワンクリックで Language Server をインストールして自動的に起動します。

GitHub エラーレポーター¶

Native

プラグインには未処理の例外を GitHub Issues に送信する自動エラーレポートシステムが含まれており、メンテナーがバグを素早く特定して修正するのに役立ちます。

仕組み¶

プラグイン内で予期しない例外が発生すると、IDE の標準エラーダイアログに Report to Plugin Author ボタンが表示されます。このボタンをクリックすると、ブラウザで以下の情報が事前入力された GitHub issue が開きます:

例外のスタックトレース
プラグインバージョンと IDE バージョン
オペレーティングシステム情報

プライバシー¶

エラーレポートはブラウザで GitHub issue のドラフトとして開きます。送信前に内容を確認・編集できます。データは自動的には送信されません --- 共有する内容を完全にコントロールできます。

要件¶

エラーレポートの送信には GitHub アカウントが必要です。レポートはプラグインの GitHub リポジトリの issue トラッカーに開きます。

エラーレポーターによりプラグインの改善への貢献が容易になります — 問題が発生した時、事前入力された GitHub issue により最小限の労力で問題を報告でき、共有内容を完全にコントロールできます。

インスペクション抑制¶

Native

// noinspection コメントを使用して特定のインスペクションを抑制します:

// noinspection RescriptDuplicateOpen
open Belt
open Belt  // This duplicate open won't be flagged

特定の箇所でインスペクションが偽陽性を出す場合、グローバルに無効にするのではなくコメントで抑制でき、他の場所ではインスペクションを有効に保てます。

フレームワーク検出¶

Native

プラグインは rescript.json ファイルを探すことで ReScript プロジェクトを自動的に検出します。rescript.json を含むプロジェクトを開くと、IDE はそれを ReScript プロジェクトとして認識し、それに応じたフレームワークの設定を提案します。

これによりプロジェクト固有の設定やツール統合などのフレームワーク対応機能が有効になります。

自動フレームワーク検出により、ReScript プロジェクトを開くとすぐにプラグインの全機能セットが有効になり、手動設定は不要です。

コード並べ替え¶

Native

Code > Rearrange Code により、ReScript ファイルのトップレベル宣言を標準的な順序に並べ替えます。

デフォルトの順序は以下のとおりです:

open / include ステートメント
type 宣言
exception 宣言
module 宣言
external 宣言
let 宣言

これによりプロジェクト全体で一貫したファイル構造を維持できます。

自動並べ替えによりすべてのファイルで一貫した宣言順序が強制され、個々の開発者の習慣に頼ることなく型、モジュール、関数がどこにあるかを常に把握できます。

モジュール依存関係ダイアグラム¶

Native

モジュールの依存関係を Mermaid グラフとして視覚化します。任意の Mermaid レンダラに貼り付けたり、Graphviz DOT 形式でエクスポートしたりできます。

開き方: View > Tool Windows > ReScript Module Diagram、または Tools > Show ReScript Module Diagram を使用します

仕組み¶

ダイアグラムプロバイダはプロジェクト内のすべての .res ファイルをスキャンし、open と include 文から有向グラフを構築します。各モジュールがノードになり、open ModuleName や include ModuleName ごとに現在のモジュールから参照先への辺が追加されます。結果はツールウィンドウ上に Mermaid graph TD 記法で表示されます。

ツールウィンドウのレイアウト¶

ツールバー: Refresh（現在の PSI からグラフを再構築）、Copy as DOT、Copy as Mermaid
メイン領域: Mermaid graph TD ソースを表示する読み取り専用テキストパネル
ステータスバー: モジュール数と辺の数

エクスポート¶

Copy as Mermaid — graph TD テキストをクリップボードにコピーします。Mermaid Live Editor や Mermaid 対応の Markdown ファイルに貼り付けるとグラフがレンダリングされます
Copy as DOT — Graphviz の digraph をクリップボードにコピーします。dot -Tpng にパイプしたり、.dot ファイルに貼り付けて Graphviz でレンダリングできます

空白・ピリオド・引用符を含むモジュール名は自動的にエスケープされるため、エクスポート結果はいずれのレンダラにもそのまま渡せます。

ユースケース¶

プロジェクト構造の理解 — モジュール間の関係を一目で確認
密結合の特定 — 依存関係が多すぎるモジュールを発見
リファクタリング計画 — モジュールの移動や分割の影響を理解

依存関係ダイアグラムはプロジェクトのモジュール構造を視覚的に明らかにし、コードだけでは見えにくい循環依存、密結合モジュール、リファクタリングの機会を容易に発見できます。

PPX 展開ビュー¶

LSP Required

現在のファイルに適用された PPX マクロの展開出力を表示するツールウィンドウです。

開き方: View > Tool Windows > PPX Expansion

仕組み¶

PPX 展開ビューは現在のファイルに対して ReScript コンパイラの PPX プリプロセッサを実行し、変換された AST 出力を表示します。PPX が裏側で何のコードを生成するかを理解するのに役立ちます。

サポートされる PPX 属性¶

@react.component — 生成された React.createElement 呼び出しとコンポーネントラッパーを表示
@deriving(json) — 生成された toJson と fromJson 関数を表示
@deriving(accessors) — 生成されたフィールドアクセサ関数を表示
@genType — 生成された TypeScript 型定義を表示

ユースケース¶

PPX 動作のデバッグ — 生成されたコードが期待通りに動作しない理由を理解
学習 — PPX 属性がソースコードをどのように変換するかを確認
最適化 — パフォーマンスの観点から生成された出力をレビュー

PPX マクロはソースファイルには見えないコードを生成します — このビューにより生成されたコードが可視化され、PPX 関連の問題のデバッグやコンパイラが実際に何を生成するかの理解に役立ちます。

コメント内コード評価¶

Native

ドキュメントコメントに埋め込まれた ReScript コード例をエディタから直接評価します。

/** ... */ ドキュメントコメントにコードブロックが含まれている場合、プラグインはコードを評価し結果をインラインで表示できます。ドキュメント内のコード例が正しく最新であることの検証に役立ちます。

使い方¶

ドキュメントコメント内にコード例を記述します
コードブロック内にキャレットを置きます
Code > Evaluate Comment Code を使用します（またはガターアクション）

/**
 * Adds two numbers.
 *
 * ```
 * add(1, 2)  // => 3
 * ```
 */
let add = (a, b) => a + b

プラグインはコードブロックを抽出してコンパイル・実行し、結果をインラインアノテーションとして表示します。

コメント内コード評価によりドキュメントの例が正しく最新であることを検証し、ユーザーを誤解させる前に古い・壊れたコードサンプルをキャッチします。

型シグネチャ検索¶

LSP Required

Search Everywhere ダイアログ（Shift+Shift）で型シグネチャから関数を検索します。

使い方¶

Shift+Shift で Search Everywhere を開きます
Types タブに切り替えます
型シグネチャクエリを入力します（例: string => int、array<'a> => int、(int, int) => int）
プロジェクトと依存関係からマッチする関数がリスト表示されます

クエリ構文¶

型シグネチャクエリは標準的な ReScript 型構文を使用します:

クエリ	マッチ対象
`string => int`	string を受け取り int を返す関数
`array<'a> => int`	任意の配列を受け取り int を返す関数
`(int, int) => int`	2 つの int を受け取り int を返す関数
`option<'a> => 'a`	option 値をアンラップする関数

検索はプロジェクトのスタブインデックスの関数型シグネチャに対してマッチングを行い、LSP サーバーを必要とせずに高速な検索を提供します。

必要な関数の型は分かっているが名前が分からない場合、型シグネチャ検索により関数の形状から正しい関数を発見できます — ReScript のような型推論言語に自然にフィットします。

LSP 再起動アクション¶

LSP Required

Language Server が応答しなくなった場合や設定変更を反映する必要がある場合、Tools > Restart ReScript Language Server で再起動できます。

使用するタイミング¶

@rescript/language-server を手動で更新した後
LSP サーバーが応答しなくなった場合
サーバーの再起動が必要な LSP 関連の設定を変更した後

このアクションはプロジェクトが開いている場合にのみ利用可能です。現在の LSP サーバーインスタンスを停止し、新しいインスタンスを起動します。

Language Server が不良状態になった場合、素早い手動再起動が最も簡単な修正であり、IDE 全体を再起動する必要を回避できます。

LSP 初期化オプション¶

LSP Required

プラグインは ReScript Language Server にいくつかの初期化オプションを送信し、VSCode 拡張で利用可能な設定と一致させます。Settings > Languages & Frameworks > ReScript で設定します。

利用可能なオプション¶

設定	デフォルト	説明
シグネチャヘルプを有効化	On	`(` 入力時に関数パラメータ情報を表示
コンストラクタペイロードのシグネチャヘルプ	On	バリアントコンストラクタのペイロードにシグネチャヘルプを表示
プロジェクト設定キャッシュを有効化	On	プロジェクト設定をキャッシュして LSP の起動を高速化
Inlay Hints を有効化	Off	LSP 提供の Inlay Hints をエディタに表示（実験的）
Inlay Hints の最大長	25	Inlay Hint ラベルの最大文字数（0 = 無制限）
コンパイルステータスを有効化	On	LSP サーバーからコンパイルステータス通知を受信

これらの設定の変更は LSP サーバーの再起動後に有効になります（設定ダイアログで Apply をクリックすると自動的に再起動されます）。

これらの初期化オプションにより VSCode 拡張と同じ設定の柔軟性が得られ、シグネチャヘルプ、キャッシュ、インレイヒントなどの LSP 動作を好みに合わせて微調整できます。

LSP 状態のダンプ¶

LSP Required

Dump LSP State アクションは、トラブルシューティング用に ReScript Language Server の診断情報を表示します。

アクセス: Tools > Dump ReScript LSP State

表示内容¶

このアクションは以下の情報を収集して表示します:

LSP サーバーのステータスと数
ReScript プロジェクト検出情報
関連するプラグイン設定

ユースケース¶

LSP 問題のトラブルシューティング — LSP サーバーが実行中で正しく設定されていることを確認
バグレポート — プラグインメンテナーに問題を報告する際に LSP 状態を含める
デバッグ — LSP サーバーがどの設定を読み込んだかを確認

Dump LSP State は設定ファイルやログ出力を手動で検査することなく、Language Server の問題をトラブルシューティングしたりバグレポートに含めるために必要な診断情報を提供します。

定義済みコードスタイル¶

Native

プラグインは Settings > Editor > Code Style > ReScript > Set from... > Predefined Style > ReScript Standard で適用できる "ReScript Standard" 定義済みコードスタイルを登録します。

これにより標準的な ReScript の規約（2 スペースインデント、タブなし）に合わせてインデントとフォーマット設定をワンクリックで構成できます。

手動でインデントやタブ/スペースの設定を行うには、Settings > Editor > Code Style > ReScript に移動してください。

定義済みコードスタイルによりワンクリックで正しい ReScript フォーマット規約が適用され、インデント設定を手動で構成する必要がありません。

要素の説明¶

Native

プラグインは Find Usages、Safe Delete、リファクタリング確認などの IDE ダイアログで使用する ReScript 要素の人間が読みやすい説明を提供します。

例えば、関数に Safe Delete を使用すると、確認ダイアログには以下のように表示されます:

Delete function 'greet'?

汎用的な "Delete element" メッセージではなく上記のように表示されます。これは let バインディング、type 宣言、module 宣言、external 宣言、exception 宣言に適用されます。

IDE ダイアログでの記述的な要素名によりリファクタリングの確認が明確になります — 汎用メッセージではなく「関数 'greet' を削除」と表示され、偶発的な削除のリスクが減ります。

ビルドウォッチ自動開始プロンプト¶

Native

ReScript プロジェクトを開くと、プラグインが ReScript ウォッチビルド（rescript build -w）の開始を提案するバルーン通知を一度表示します。

表示される条件¶

プロンプトはプロジェクト起動時に以下の条件を満たす場合に表示されます:

プロジェクトに rescript.json が含まれている
ReScript CLI（rescript）が node_modules/.bin/ に見つかる
現在の IDE セッションでプロンプトがまだ非表示にされていない

通知アクション¶

アクション	説明
Start Build Watch	Run Configuration 経由で `rescript build -w` を起動します
Don't ask again	この IDE セッションでプロンプトを非表示にします

Start Build Watch をクリックすると、ライブリコンパイルビルドプロセス付きの Run ツールウィンドウが開きます。

ビルドウォッチプロンプトにより、プロジェクトを開いた瞬間からライブコンパイルフィードバックを受け取り始めることができ、ビルドコマンドを手動で実行することを覚えておく必要がありません。

REPL¶

Native

IDE 内で直接 ReScript コードスニペットを実行するためのインタラクティブな Read-Eval-Print ループです。

開き方: View > Tool Windows > ReScript REPL

使い方¶

REPL ツールウィンドウを開きます
下部の入力エリアに ReScript コードを入力します
Run をクリックして実行します
上部の出力エリアに結果が表示されます
Clear をクリックして出力をリセットします

式の処理¶

REPL は出力のためにシンプルな式を自動的にラップします:

let バインディング、type/module 宣言、open ステートメントはそのまま使用されます
既に Js.log または Console.log を含むコードはそのまま使用されます
シンプルな式は自動的にラップされます: 1 + 2 は Js.log(1 + 2) になります

// Input: simple expression
1 + 2
// Output: 3

// Input: let binding
let greeting = "Hello"
Js.log(greeting)
// Output: Hello

仕組み¶

各実行は分離されています:

ユーザーコードを含む一時的な .res ファイルを作成します
npx rescript build でコンパイルします
コンパイルされた JavaScript を node で実行します
出力エリアに stdout/stderr を表示します

要件¶

ReScript CLI（rescript）がプロジェクトにインストールされている必要があります
Node.js が PATH に存在する必要があります

制限事項¶

実行間で永続的な状態はありません（各実行は分離されています）
コンパイルと実行に 30 秒のタイムアウトがあります

REPL はファイルの作成、コンパイル、実行なしに式のテストや API の探索ができるインタラクティブなフィードバックループを提供します — ReScript の学習や素早い仮定の検証に最適です。

Worksheet モード¶

Native

Worksheet ファイル（.resw）では ReScript コードを記述し、各トップレベル式が評価されて結果がインラインで表示されます。

使い方¶

.resw 拡張子で新しいファイルを作成します
トップレベル式を含む ReScript コードを記述します
各式が評価され、結果がインラインコメントとして表示されます

let x = 1 + 2
// => 3

let greeting = "Hello, " ++ "World!"
// => Hello, World!

type color = Red | Green | Blue
// (type declarations are skipped)

式のグルーピング¶

Worksheet は波括弧と括弧の深さを追跡することで複数行の式を理解します。空行、コメント、型宣言、モジュール宣言、open ステートメントは評価時にスキップされます。

要件¶

ReScript CLI（rescript）がプロジェクトにインストールされている必要があります
Node.js が PATH に存在する必要があります

Worksheet はすべての式の結果がインラインで表示されるノートブックのような体験を提供し、アルゴリズムのプロトタイピング、変換のテスト、ドキュメント例の検証に最適です。

スクラッチファイル¶

Native

プロジェクトにファイルを追加せずに、IDE の Scratches パネルで素早い実験用の一時的な ReScript ファイルを作成します。

使い方¶

File > New > Scratch File を開きます（macOS では Cmd+Shift+N）
言語リストから ReScript を選択します
デフォルトテンプレート付きの新しいスクラッチファイルが開きます:

// ReScript Scratch File
let result = "Hello"
Js.log(result)

機能¶

完全な ReScript シンタックスハイライトと言語サポート
プロジェクトディレクトリ外に保存されるスタンドアロンファイル
通常の .res ファイルと同様にコンパイル・実行できます
プロトタイピング、ライブラリ関数のテスト、ReScript 構文の学習に便利です

スクラッチファイルはプロジェクトにファイルを追加したりソースツリーを汚すことなく、素早い実験のための使い捨てワークスペースを提供します。

Call Hierarchy¶

Native

関数の呼び出しグラフを表示し、何がその関数を呼び出すか（Callers）と、その関数が何を呼び出すか（Callees）の両方を表示します。

開き方: 関数名にカーソルを置き、Ctrl+Alt+H（macOS では Cmd+Alt+H）を押します

表示モード¶

階層ブラウザには 2 つのタブがあります:

Callers（デフォルト）--- 選択した関数を呼び出すプロジェクト内のすべての関数を表示します。テキストベースの検索でプロジェクト全体を検索します。

Callees --- 選択した関数が呼び出すすべての関数を表示します。同じファイル内の関数本体をスキャンして検出します。

ナビゲーション¶

ノードをダブルクリックして関数のソースに移動します
Previous/Next ボタンを使用して関数間をナビゲートします
ノードはアルファベット順にソートされます

仕組み¶

Call Hierarchy は LSP ではなく PSI ベースのテキスト検索を使用します:

Callers: プロジェクト内のすべてのファイルで関数名のテキスト出現を検索します
Callees: 関数本体の識別子トークンをスキャンし、同一ファイル内の宣言と相互参照します

制限事項¶

テキストベースのマッチング --- エイリアスやモジュール修飾された呼び出しは見つからない場合があります
Callees は同一ファイル内でのみ検出されます（ファイル間の Callee 検出はありません）
.res ファイル内の let および external 宣言に対して動作します

関数の呼び出しチェーンを理解することはリファクタリングやデバッグ時に不可欠です — このビューはコードを手動でトレースすることなく、関数を誰が呼び出し何を呼び出すかを明らかにします。

高度な機能¶

Code Lens¶

仕組み¶

設定¶

要件¶

コンパイル済み JavaScript プレビュー¶

自動更新の動作¶

分割表示のセットアップ¶

ツールバーアクション¶

ユースケース¶

モジュール階層¶

2 つの表示モード¶

ナビゲーション¶

Inlay Hints¶

設定¶

Code Lens との違い¶

PPX アノテーションヒント¶

rescript.json の JSON Schema¶

自動補完されるフィールド¶

機能¶

Markdown コードフェンスのハイライト¶

統合メカニズム¶

要件¶

JavaScript Injection in %raw()¶

言語インジェクションメカニズム¶

利用できる機能¶

要件¶

RegExp Injection in %re()¶

言語インジェクションメカニズム¶

利用できる機能¶

要件¶

インジェクトされた言語のフォーマット¶

Grazie 統合¶

Index Pattern Builder¶

Element Signature Provider¶

プロジェクトウィザード¶

手順¶

利用可能なテンプレート¶

生成されるプロジェクト構造¶

テンプレートの詳細¶

バリデーションライブラリ¶

プロジェクト作成後¶

開発者体験の向上¶

Vite+ ツールチェイン (Vite + React、Electron、Monorepo)¶

ファイルテンプレート¶

使い方¶

利用可能なテンプレート¶

テンプレートのカスタマイズ¶

.d.ts バインディング生成¶

使い方¶

サポートされる構文¶

型マッピング¶

要件¶

制限事項¶

カラープレビュー¶

VCS Code Vision¶

パッケージ依存関係¶

Quick Documentation¶

Safe Delete¶

名前候補の提案¶

Reader Mode¶

TODO インデキシング¶

Open ステートメントインデックス¶

Project View の拡張¶

自動インポートオプション¶

式の型表示¶

Type Info ツールウィンドウ¶

仕組み¶

ユースケース¶

要件¶

LSP 自動インストール¶

通知アクション¶

GitHub エラーレポーター¶

仕組み¶

プライバシー¶

要件¶

インスペクション抑制¶

フレームワーク検出¶

コード並べ替え¶

モジュール依存関係ダイアグラム¶