WebStorm 2025.1 ヘルプ

JSON

JSON(英語) 形式は、データの保存や構成ファイルの保存によく使用されます。WebStorm は JSON ファイルの操作に役立ち、構文とフォーマットをチェックします。一般的な種類の構成ファイルでは、WebStorm がコードを検証し、そのようなファイルの構造と内容を記述するための特別な形式である JSON スキーマ(英語)に基づいてコード補完を提供します。

WebStorm には、最も一般的な形式の登録済みスキーマセットがバンドルされています。JSON Schema Store のスキーマやカスタム JSON スキーマを使用することもできます。

Bundles schemas and schemas from Schema Store

JSON5 を有効にする

WebStorm は、JSON5(英語) を含む、最も人気のある JSON 標準のいくつかを認識します。WebStorm は、デフォルトで、json5 拡張子を持つファイルを JSON5 ファイルとして扱い、そのファイルでこの新しい構文をサポートします。

Configuration file that uses JSON5 with the default extension .json5

JSON5 構文をすべての JSON ファイルに拡張する

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | ファイルタイプに移動します。

  2. 認識されたファイルタイプリストで、JSON5 を選択します。

  3. ファイル名のパターン領域で、Add をクリックし、開くワイルドカードの追加ダイアログに *.json と入力します。

    Extend the JSON5 syntax to all JSON files

JSON Schema Store のスキーマを使用する

WebStorm は、一般的な設定ファイルのスキーマファイルをホストする JSON Schema Store(英語) からスキーマを自動的にダウンロードして使用することができます。使用可能なスキーマ（tsconfig.json など）の 1 つに名前が関連付けられているファイルを開くと、WebStorm はこのスキーマをダウンロードして使用します。適用されたスキーマの名前がステータスバーに表示されます。

JSON schema downloaded from JSON Schema Store, the name of the applied schema is shown in the Status bar

構成ファイルにカスタム名が付いている場合、またはスクラッチファイルで作業している場合は、ステータスバーの JSON スキーマなしをクリックし、リストから必要なスキーマを選択します。WebStorm は、現在のファイルを選択したスキーマに関連付け、このスキーママッピングを JSON スキーママッピングページのリストに追加します。

または、新規スキーママッピングをクリックして JSON スキーママッピングページを開き、新しいスキーマ関連付けを構成します。

No JSON schema for the current file

デフォルトでは、JSON Schema Store からのスキーマの自動ダウンロードが有効になっています。オフになっている場合は、いつでも再度有効にすることができます。

JSON Schema Store からスキーマを自動的にダウンロードする

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | スキーマと DTD | リモート JSON スキーマに移動します。

  2. リモートソースからの JSON スキーマのダウンロードを許可すると schemastore.org JSON スキーマカタログを使用するチェックボックスを選択します。

WebStorm には、多くの一般的なスキーマがバンドルされています。これらのスキーマは定期的に自動的に更新されますが、古くなっている可能性があります。

バンドルされているスキーマの最新バージョンを使用する

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | スキーマと DTD | リモート JSON スキーマに移動します。

  2. 常に最新バージョンのスキーマをダウンロードするチェックボックスを選択します。

カスタム JSON スキーマを使用する

バンドルされている登録済みスキーマと JSON Schema Store のスキーマの他に、WebStorm では独自のスキーマを作成したり、他のストレージのカスタムスキーマを使用したりすることができます。必要なスキーマを作成またはダウンロードしてプロジェクトルートに保存するか、リソースの URL を指定して WebStorm がスキーマを自動的にダウンロードできるようにすることができます。

カスタムスキーマは、JSON スキーマ標準を満たす必要があります。現在、WebStorm は 2020-12(英語) 以前のスキーマをサポートしています。

Custom schema meets the 2020-12 standard

カスタム JSON スキーマ関連付けを作成する

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | スキーマと DTD | JSON スキーママッピングに移動します。

    または、ステータスバーの JSON スキーマなしをクリックしてから、新規スキーママッピングを選択します。この場合、WebStorm は自動的にファイルを関連ファイル、フォルダー、パターンのリストに含めます。

  2. 以前に構成したすべてのスキーマが表示される中央のペインで、ツールバーの Add をクリックし、マッピングの名前を指定します。

  3. スキーマファイルまたは URL フィールドには、以前に作成またはダウンロードしたスキーマファイルの場所、または必要なスキーマが利用可能な URL を指定します。スキーマファイルの名前または対応する URL アドレスは、スキーマファイルまたは URL フィールドに表示されます。

    Specify a Schema file

  4. スキーマが準拠するスキーマ仕様バージョン(英語)を指定します。

    Select the Schema version

  5. このスキーマに対して検証するファイルまたはフォルダーのリストを作成します。WebStorm はリストに基づいて、検証対象のファイルを内部で検出します。

    リストには、特定のファイル名、ディレクトリ全体の名前、ファイル名のパターンを含めることができます。ファイル名のパターンを指定するには、次の規則を使用します。

    • role-* は、role- で始まる名前を持つすべてのファイルと一致します。

    • role-*/**/*.yaml は、role、/、/ を含む名前を持つすべての .yaml ファイルと一致します。

    • role-**.yaml は、role- で始まる名前を持つすべての .yaml ファイルと一致します。

    リストに項目を追加するには、Add mapping をクリックします。

    Add an item to the scope

    ファイルまたはフォルダーへのパスを指定するか、ファイルパターンを入力します。プロジェクトルートを基準とした相対パスを指定します。

    Specify file pattern

リモートソースからの JSON スキーマの自動ダウンロードを有効にする

  1. 設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | スキーマと DTD | リモート JSON スキーマに移動します。

  2. リモートソースからの JSON スキーマのダウンロードを許可するを選択します。

    チェックボックスをオフにすると、JSON Schema Store のスキーマを含む、JSON スキーマに関するネットワークアクティビティが無効になります。

JSON スキーマを無効にする

  • ファイルのスキーマを無効にするには、ステータスバーの JSON スキーマウィジェットをクリックし、ポップアップリストからファイルの JSON スキーマを無視を選択します。

    Ignore Schema for the current file

    または、スキーママッピングの編集を選択してスキーマのスコープを編集します。例: ファイル名が明示的に指定されている場合は、適切なパターンを編集したり、リストからファイルを削除したりできます。

    最後に、新規スキーママッピングを選択し、上記のようにスキーマの関連付けを構成できます。

    Ignore schema and create new mapping

  • 現在のファイルのスキーマとの関連付けを復元するには、ステータスバーの JSON スキーマなしをクリックし、ポップアップリストからファイルの JSON スキーマの無視を停止を選択します。

    Restore association with schema for a file

  • 現在のプロジェクト全体に対してカスタムスキーマを無効にするには、設定ダイアログ (Ctrl+Alt+S) を開き、言語 & フレームワーク | スキーマと DTD | JSON スキーママッピングに移動して、中央のペインでスキーマ関連付けを選択し、ツールバーの the Delete button をクリックします。

スキーマのスコープ間の競合を処理する

ファイル、フォルダー、パターンが 2 つ以上のスキーマのスコープに属している場合、WebStorm はこの競合を検出し、エディターと設定ダイアログの JSON スキーママッピングページに警告を表示します。

エディターでは、複数のスコープに属するファイルを開くと警告が表示されます。

Notification about conflicting schema scopes in the editor

設定ダイアログの JSON スキーママッピングページでは、複数のマッピングのスコープが重複している場合に警告が表示されます。

Notification about conflicting schema scopes in the Settings dialog

JSON スキーマで HTML 記述を使用する

デフォルトでは、WebStorm はドキュメントポップアップで JSON スキーマ定義のドキュメントを表示するときに HTML 文字をエスケープします。

スキーマが description プロパティを使用するとします。

{ "id": "http://some.site.somewhere/entry-schema#", "$schema": "https://json-schema.org/draft/2020-12/json-schema-core", "type": "object", "required": [ "options" ], "properties": { "options": { "type": "array", "description": "Interesting details: Fresh New Awesome", "minItems": 1, "items": { "type": "string" }, "uniqueItems": true }, "readonly": { "type": "boolean" } } }

すると、クイックドキュメントポップアップは次のようになります。

No formatting in documentation for JSON schema definitions with description property

豊富な HTML マークアップを使用した見栄えの良いドキュメントを作成するには、HTML の説明を description ではなく x-intellij-html-description 拡張プロパティに保存します。

{ "id": "http://some.site.somewhere/entry-schema#", "$schema": "https://json-schema.org/draft/2020-12/json-schema-core", "type": "object", "required": [ "options" ], "properties": { "options": { "type": "array", "x-intellij-html-description": "<p><b>Interesting</b> <i>details:</i></p>\n <ul><li>Fresh</li><li>New</li><li>Awesome</li></ul>\n <div style='background-color: #fff77c'>Choose schema with HTML description =)</div>", "minItems": 1, "items": { "type": "string" }, "uniqueItems": true }, "readonly": { "type": "boolean" } } }

クイックドキュメントポップアップは次のようになります。

HTML descriptions in documentation for JSON schema definitions with x-intellij-html-description property

構文ハイライトを構成する

好みや習慣に応じて JSON 対応の構文ハイライトを設定できます。

  1. 設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | JSON に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

Webpack 言語サービスのメモリ不足のトラブルシューティング

関連ページ：

スクラッチファイル

一時的なメモを作成したり、プロジェクトのコンテキスト外でコードを作成したりする必要がある場合があります。別のアプリケーションに切り替える代わりに、スクラッチファイルとスクラッチバッファを使用できます。スクラッチファイルは、構文のハイライト、コード補完、対応するファイルタイプのその他すべての機能をサポートする、完全に機能し、実行可能で、デバッグ可能なファイルです。例: あるプロジェクトに取り組んでいるときに、後で別のプロジェクトで使用できるメソッドのアイデアを思いつくことがあります。メソッドのドラ...

YAML

WebStorm を使用すると、YAML ファイル（.yml、.yaml）を操作でき、次の機能がサポートされます。構文のハイライトカラー設定は、設定ダイアログ () のエディター | カラースキームの切り替え | YAML ページで変更できます。コードのフォーマット YAML に関連するコードスタイル設定には、設定ダイアログ () のエディター | コードスタイル | YAML ページでアクセスできます。InspectionsWebStorm は、重複したキー、YAML ドキュメント内の未使用のアンカ...

色とフォント

開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...

Webpack

WebStorm は webpack モジュールバンドラーと統合されています。このサポートは、webpack モジュールの解決とエイリアスの解決を考慮に入れることにより、JavaScript ファイルのコーディング支援を改善します。異なる webpack 構成を持つ複数のモジュールで構成されるプロジェクトでは、WebStorm は各モジュールに関連する構成ファイルを自動的に検出し、そこからモジュール解決ルールを使用できます。以下の使用する webpack 構成ファイルの指定を参照してください。web...

言語サービスのメモリ不足のトラブルシューティング

透明性を確保するため、WebStorm は現在、TypeScript、Angular、Vue、Astro、その他のフレームワーク固有の言語サービスに依存しています。WebStorm はこれらの言語サービスとのスムーズな統合を目指していますが、IDE 自体ではなく、これらの言語サービスによってパフォーマンスの問題が発生することがよくあります。言語サービスにおける Out-of-memory エラーは開発ワークフローを中断させ、自動補完、コード分析、エラーのハイライトなどの重要な機能を壊す可能性がありま...