Angular

Angular(英語) は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。 GoLand は Angular をサポートしており、新しい Angular アプリの作成やコンポーネントの開発からデバッグやテストまで、開発プロセスのあらゆるステップでサポートします。

始める前に

Node.js をダウンロードしてインストールします。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインの管理を参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Angular と AngularJS プラグインをインストールして有効にします。

新しい Angular アプリケーションを作成する

新しい Angular アプリケーションの構築には、GoLand が npx を使ってダウンロードおよび実行する Angular CLI を使うのが推奨されています。その結果、アプリケーションはすぐに使える TypeScript と webpack の構成でブートストラップされます。

もちろん、自分で Angular CLI をダウンロードすることも、空の GoLand プロジェクトを作成して Angular をインストールすることもできます。

メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。
左側のペインで、 Angular CLI を選択します。
プロジェクト名と作成先のフォルダーを指定します。ノードランタイムフィールドには、使用する Node.js ランタイムを指定します。リストから設定済みのランタイムを選択するか、追加を選択して新しいランタイムを設定します。
Angular CLI リストから npx --package @angular/cli ng を選択してください。
または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12 で npm install -g @angular/cli を実行して、 @angular/cli パッケージを自分でインストールします。アプリケーションを作成するときに、 @angular/cli パッケージが保存されているフォルダーを選択します。
オプション:
- 追加パラメーターフィールドに、Angular CLI に渡す追加の ng new オプションを指定します。このフィールドではコード補完を使用できます。オプションの名前の入力を開始するか、 Ctrl+Space を押すと、GoLand に使用可能なオプションとその説明が表示されます。
- Angular バージョン 16(英語) 以降を使用している場合は、スタンドアロンのコンポーネントを使用した新規プロジェクトの作成チェックボックスを選択することもできます。詳細については、 Angular オフィシャル Web サイト(英語)を参照してください。
作成をクリックすると、GoLand は必要な構成ファイルすべてを含む Angular 固有のプロジェクトを生成し、必要な依存関係をすべてダウンロードします。

空のプロジェクトに Angular をインストールする

Angular を使用する空のプロジェクトを開きます。
組み込みターミナル (Alt+F12) で次のように入力します。
npm install @angular/core
これにより、フレームワークの重要なランタイム部分とともにコア Angular パッケージがインストールされます。

また、 Angular の他のパッケージをインストールする必要がある場合もあります。パッケージ一覧を参照してください。

既存の Angular アプリケーションから始める

既存の Angular アプリケーションの開発を継続するには、GoLand で開いて必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

ようこそ画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

ようこそ画面でクローンをクリックします。
または、メインメニューから Git | クローン… または VCS｜バージョン管理から取得を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例： Mercurial または Perforce。

依存関係をダウンロードする

ポップアップで 'npm install' を実行または 'yarn install' の実行をクリックします。
npm、 Yarn 1 、または Yarn 2 が使用できます。詳しくは npm と Yarn を参照してください。
または、エディターの package.json のコンテキストメニュー、またはプロジェクトツールウィンドウ (Alt+1) で 'npm install' を実行または 'yarn install' の実行を選択します。

プロジェクトのセキュリティ

GoLand の外部で作成されインポートされたプロジェクトを開くと、GoLand は未知のソースコードを含むこのプロジェクトをどのように処理するか決定できるダイアログを表示します。

次のいずれかのオプションを選択します：

セーフモードでプレビュー：この場合、GoLand はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
GoLand はエディター領域の上部に通知を表示し、プロジェクトを信頼する… リンクをクリックすることで、いつでもプロジェクトをロードできます。
プロジェクトを信頼：この場合、GoLand はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての GoLand の機能が利用可能になることを意味します。
開かない：この場合、GoLand はプロジェクトを開きません。

詳しくはプロジェクトのセキュリティをご覧ください。

コードを記述して編集する

この章では、Angular 固有のヒントを提供します。一般的なガイドラインについてはソースコードの作成と編集および TypeScript を参照してください。

Angular 言語サービスを構成する

GoLand は、コード補完、エラー検出とハイライト、ヒント、Angular テンプレート内のナビゲーションなど、Angular 固有の完全なコーディング支援を提供します。 Angular プロジェクト向けのコーディング支援は、 Angular 言語サービス、 TypeScript 言語サービス、または内部 GoLand パーサーとコードインスペクションのみから取得するように設定できます。

デフォルトでは、Angular 言語サービスは有効になっており、ステータスバーの言語サービスウィザードに表示されます。

Angular 設定を開くには、ステータスバーのをクリックし、をクリックします。
または、 Ctrl+Alt+S を押して設定を開き、設定 | 言語 & フレームワーク | TypeScript | Angular を選択します。
.ts ファイルのコーディング支援を受けるサービスを指定します。
- デフォルトでは自動オプションが選択されており、GoLand は適切なコンテキストで Angular 言語サービスを自動有効化します。その結果、型評価は TypeScript 言語サービスのデータに基づいて行われ、内部 GoLand インスペクションも適用されます。
- 内部 GoLand パーサーとインスペクションだけのデータに基づいてコーディング支援を受けたい場合は、無効オプションを選択してください。

Angular 言語サービスを再起動する

ステータスバーのをクリックし、 Angular TypeScript <バージョン> の横にあるをクリックします。

型評価を構成する

ステータスバーのをクリックし、型評価を取得したいサービスの横にあるチェックボックスをオンにします。準備ができたら GoLand を再起動してください。
または、 Ctrl+Alt+S を押して設定を開き、設定 | 言語 & フレームワーク | TypeScript | Angular を選択し、自動を選択して、サービス駆動型型エンジンを有効化チェックボックスを選択します。
デフォルトではチェックボックスはオフなので、型評価・解決・コードインスペクション・リファクタリングは GoLand 内部の TypeScript エンジンの型情報を元に行われます。
このデフォルト動作により、GoLand 内部の TypeScript エンジンと Angular 言語サービスの型評価アルゴリズムが異なるため、パフォーマンス上の問題や型解決のバグが発生することがあります。チェックボックスをオンにすることで、これらの問題を回避できる場合があります。

メモリ処理を構成する

GoLand は言語サービスとのスムーズな統合を目指していますが、GoLand 自体ではなく言語サービスによって引き起こされる out-of-memory エラーが発生する場合があります。

out-of-memory エラーを防止、またはシームレスに解決して言語サービスの安定した動作を確保するには、メモリ処理を設定する必要があります。詳しくは言語サービスを参照してください。

Angular 言語サービスのメモリ処理設定は、常に TypeScript 言語サービスから継承されます。

TypeScript 言語サービスのメモリ処理を構成する

Ctrl+Alt+S を押して設定を開き、設定 | 言語 & フレームワーク | 言語サービス | TypeScript に移動します。
言語サービスメモリ領域で、メモリ処理モードを選択します。
- メモリを増やし、言語サービスを自動的に再起動するには、利用可能な場合はメモリを自動的に増加するを選択します。
- または、メモリ制限を設定するを選択し、言語サービスで使用する最大メモリを指定します。
  指定されたメモリサイズが利用可能な RAM を超えた場合、GoLand はツールチップで適切な値を提案します。
  お使いのコンピューターに十分な RAM 容量があることを確認してください。すでに 8GB 以上など、高いメモリ割り当てになっている場合は、アップグレード / ダウングレードを検討するか、プロジェクトの範囲を限定してください。

コンポーネント

GoLand を使うと、いくつかの方法で Angular コンポーネントを作成できます：

事前定義またはカスタムのライブテンプレートを使用します。
関連する .ts 、 .html 、 .css ファイルの束を含むコンポーネントフォルダーを作成します。
専用のリファクタリングを使用したテンプレートからコンポーネントを抽出します。

事前定義されたテンプレートを使用してコンポーネントを作成する

GoLand は、ライブテンプレートを事前定義しており、 a-component、 a-component-inline、 a-component-root などの Angular コンポーネントを作成できます。

Create an Angular component using a predefined code snippet

ライブテンプレートの詳細は「ライブテンプレート」を参照してください。

事前定義されたテンプレートの完全なリストを表示するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | ライブテンプレートに移動して、 Angular ノードを展開します。

エディターで、 Ctrl+J を押し、リストから適切なテンプレート（たとえば、 a-component ）を選択してから、 Enter を押します。
GoLand はコンポーネントスタブを生成し、キャンバス付きのフィールドにキャレットを配置し、そこでコンポーネント名の指定を待ちます。コンポーネント名を入力すると、 Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。
必要に応じて、インスペクションポップアップを使用して新しいコンポーネントをスタンドアロン(英語)にします。

WebStorm ブログで、コードスニペットの使用と作成(英語)の変数を使用してテンプレートをカスタマイズする方法を学びます。

コンポーネントフォルダーを作成する

GoLand では、Angular コンポーネント用の複数のファイルを 1 回のアクションで作成し、それらをすべて別のフォルダーに配置することもできます。これを行うには、複数の子テンプレートを持つファイルテンプレートを使用する必要があります。親テンプレートからファイルを作成すると、子テンプレートから関連ファイルが自動的に生成されます。詳細は複数ファイルを含むテンプレートを参照してください。

たとえば、ロジック用の example.component.ts 、テンプレート用の example.component.html 、スタイル用の example.component.css など、多数のコンポーネントファイルを含む example フォルダーを作成するとします。 2 つの親テンプレートを含むファイルテンプレートを作成すると、3 つのファイルすべてが一度に生成され、別のフォルダーに配置されます。

設定ダイアログ（Ctrl+Alt+S ）で、エディター | ファイルとコードテンプレートを選択します。
まず、TypeScript コンポーネントファイル用のテンプレートを作成します：
1. ファイルタブで、ツールバーの追加ボタン () をクリックします。
  新しい名前未設定テンプレートがリストに追加されます。
2. 右側のペインで、テンプレート名を指定し、 Angular コンポーネントとし、ファイル拡張子として component.ts とします。
3. 「ファイル名」フィールドに $NAME/$NAME と入力します。
4. 必要に応じて、コードテンプレートを追加します。例:
  /* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
適用をクリックしてください。
関連する HTML ファイル用の子テンプレートを作成します：
1. 親テンプレート Angular コンポーネントを選択し、ツールバーの子テンプレートファイルの作成ボタンをクリックします。
  子テンプレートが Angular コンポーネントテンプレートに追加されます。
2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、 component.html 拡張子を指定します。
適用をクリックしてください。
関連するスタイルシートの子テンプレートを作成します。
1. 親テンプレート Angular コンポーネントを選択し、ツールバーのをクリックします。子テンプレートが Angular コンポーネントテンプレートに追加されます。
2. 右側のペインで、ファイル名フィールドに $NAME/$NAME と入力し、 component.css 拡張子を指定します。
OK をクリックしてテンプレートを保存します。
コンポーネントファイルを作成します。
コンポーネントファイルを保存するフォルダーのコンテキストメニューから、新規 | Angular コンポーネントを選択します。開いたダイアログで、フォルダーとその中のコンポーネントファイル（この例では example ）に使用される名前を指定します。

テンプレートからコンポーネントを抽出する

Angular コンポーネントを抽出しますリファクタリングは、 angular.json ファイル内の schematic 設定を考慮して、 ng generate component を実行することで機能します。

HTML テンプレートファイルで、Angular コンポーネントに抽出したいコード箇所を選択します。
選択のコンテキストメニューからリファクタリング | コンポーネントの抽出を選択します。
または、 Ctrl+Alt+Shift+T を押して、リファクタリングポップアップからコンポーネントの抽出を選択します。
開いたダイアログで、新しいコンポーネント名を指定します。

スタンドアロンコンポーネント

プロジェクトで Angular 19(英語) を使用している場合、コンポーネント、パイプ、ディレクティブはデフォルトで スタンドアロン になります。 NgModules で宣言されているコンポーネントの場合は、 standalone: false を設定してください。

GoLand は、 non-standalone パイプ、ディレクティブ、コンポーネントの誤ったインポートや、非スタンドアロンコンポーネント内での インポート プロパティの使用を検出します：

シグナル

GoLand を使えば、 signal、 computed、 effect テンプレートから直接 Angular シグナルを簡単に作成できます。

シグナルを作成する

必要な関数を書きます。 GoLand はインスペクションを実行し、新しい関数を未解決としてハイライトします。
ハイライトされた関数の上にマウスを置き、ポップアップ内のシグナル「<関数名>」を作成しますリンクをクリックします。
あるいは、ハイライトされた機能にカーソルを置き、 Alt+Enter を押して、シグナル「<関数名>」を作成しますを選択します。
GoLand は、新しいシグナルのスタブが生成されるコンポーネントの TypeScript ファイルへ案内します。必要に応じてプレースホルダーを入力します。

GoLand は、 contentChild、 contentChilden、 viewChild、 viewChildren シグナルクエリを認識してハイライトを提供し、ドキュメントや補完、ナビゲーションもサポートします。

Angular シグナルのハイライトを構成する

Ctrl+Alt+S を押して設定を開き、エディター | カラースキームの切り替え | Angular テンプレートを選択します。
リストからシグナルを選択し、フォアグラウンドの横にある色の表示をクリックします。
好みの色を選択し、適用をクリックします。

構造ディレクティブ

GoLand は構造ディレクティブを認識し、テンプレート内でハイライトします。

バインディングキーとテンプレートコンテキストプロパティについては、ポップアップで補完が提案されます。

ディレクティブ入力にマップされたテンプレートバインディングキーに対して、名前変更リファクタリングが提供されます。

属性を完了するか、 Ctrl+P を押すと、パラメーター情報ポップアップが自動的に表示されます。

ホストリスナーとバインディング

GoLand はホストリスナーおよびバインディングに完全対応しています。

@HostListener および @HostBinding デコレータの補完、ハイライト、簡単なドキュメント化。
@HostListener のイベント完了
型チェックブロック (TCB)(英語) はホストバインディング用に生成されます。
ホストバインディングと HTML テンプレートにわたる CSS クラスのサポート

反応型

GoLand は Angular リアクティブフォームのサポートも提供します。

new FormGroup({.. .}) および FormBuilder.group({...}) 呼び出しを使用したフィールド初期化子からネストされたフォームグループモデル構造を構築し、 FormBuilder.group({...}) 呼び出しを使用したコンストラクター内のフィールド初期化も行います。
GoLand は、フォームグループオブジェクトイニシャライザー、新しいインスタンス呼び出し（FormGroup、 FormControl、 FormArray ）、および FormBuilder メソッド内における コントロール、 グループ、 array を認識します。
FormGroup.get() 呼び出し時、GoLand はコード補完、名前検証、未知セグメントのクイックフィックス、文字列リテラル内の構文ハイライトを提供します。
HTML テンプレートの formControlName、 formGroupName、 formArrayName 、コード補完、名前検証、欠落しているコントロールを作成するためのクイックフィックス、構文のハイライト、構造の依存関係が提供されます。

段階的な水分補給

GoLand は Angular 19 @defer ハイドレート構文をサポートしています。

コード補完
クイックドキュメントルックアップ
Angular バージョン 19 より前のバージョンではエラーが報告されます。

HTML テンプレートを制御フローブロックで囲む

Angular HTML テンプレートで、コードフラグメントを選択し、 Ctrl+Alt+T を押して、リストから囲んでいるコードを選択します。

ngadd で新機能を追加

公開されているほとんどの Angular ライブラリ(英語)は、 Angular の依存関係アクションを使用して追加できます。このアクションは ng add コマンド(英語)を実行し、依存関係をインストールして、現在の作業ディレクトリにあるアプリを更新し、その依存関係を使用するようにします。すべてのライブラリが ng add によるインストールをサポートしているわけではないことに注意してください。

メインメニューからファイル | 新規作成を選択するか、プロジェクトツールウィンドウ (Alt+1) で Alt+Insert を押してから、 Angular の依存関係を選択します。
リストから、追加するライブラリを選択します。リストには、 ng add で確実にインストールできるライブラリが表示されます。リストにないパッケージをインストールするには、その末尾までスクロールして上記にないパッケージをインストールするリンクをダブルクリックし、表示されるダイアログでパッケージ名を指定します。
ウィザードの手順に従います。
下記の例は、Angular マテリアルをプロジェクトに追加する方法を示しています。

package.json で手動管理している場合でも、GoLand は ng add をサポートしたパッケージを認識します。 package.json にそのようなパッケージを追加すると、GoLand は ng add によるインストールを提案します。

Angular Schematics でコードを生成する

GoLand は、 @angular/material などのライブラリで定義された schematics と Angular CLI 自体で定義されたものの両方を使用してコードを生成できます。

メインメニューからファイル | 新規作成を選択するか、プロジェクトツールウィンドウで Alt+Insert を押してから Angular Schematics を選択します。
リストから、関連する schematic を選択します。 schematics の名前の入力を開始すると、入力するにつれてリストが縮小します。
表示されたダイアログで、生成する schematic の名前と、必要に応じて追加オプションを指定します。 GoLand は schematic の説明や、利用可能オプションの補完・説明も表示します。

パラメーターのヒントを表示する

Angular HTML テンプレートでは、パラメーターヒントはメソッドと関数のパラメーター名を表示し、コードの可読性を向上させます。テンプレートでは、ブロックパラメーターの情報は補完時に表示されます。

パラメーターのヒントを設定する

設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | インレイヒントに進みます。
パラメーター命名の Angular HTML テンプレートを展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューで、設定変更がコードの見た目にどう影響するかを確認できます。
一部のメソッドや関数では、GoLand はいかなるコンテキストでもパラメーターヒントを表示しません。除外リスト… をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

コードをインスペクションする

GoLand は、多くの Angular 固有インスペクションを提供し、コード編集中のエラー検出やクイックフィックス提案に役立ちます。

重複したプロパティ

以下の例では、 テンプレート と templateUrl の両方のプロパティが使用されています。 GoLand はエラーを検出し、警告とクイックフィックスを提案します。

構造ディレクティブの誤った使用

GoLand は、 *ngIf と *ngFor 構造ディレクティブの誤使用を警告します。

スタンドアロンコンポーネントの使用

Angular 固有のインスペクションは、スタンドアロンコンポーネント(英語)の不適切な使用を特定できます。下記の例では、GoLand がスタンドアロンでないコンポーネントのインポートステートメントを検出し、問題のクイックフィックスを提案します。

未使用のインポート

スタンドアロン コンポーネント内で、GoLand は未使用のコンポーネント、パイプ、ディレクティブのインポートステートメントを検出し、それらの削除を提案します。

未使用のインポートステートメントは、ファイルの再フォーマット時（Ctrl+Alt+Shift+L ）にも自動的に削除されます。

クイックフィックスとコンテキスト認識アクション

変換 プロパティの有無にかかわらず、Angular コンポーネントテンプレートから @入力 および @出力 プロパティを作成するためのクイックフィックスを使用すると便利な場合があります。必要なインポートステートメントも自動的に生成されることに注意してください。

Quick-fix to generate @Input and @Output properties

GoLand は、適切に宣言されたフィールドを生成するのに役立つコンテキスト認識型のフィールドの作成およびメソッドの作成アクションも提供します。

Angular 固有のインスペクションの表示と構成

設定ダイアログ（Ctrl+Alt+S ）でエディター | インスペクションに移動します。
Angular ノードを展開します。
インスペクションのプロファイルや重大度を設定し、事前定義されたインスペクションの無効化・抑制や、コードインスペクションの説明どおりにカスタムインスペクションの作成が可能です。

Angular アプリケーションを移動する

Angular プロジェクトでは、TypeScript、テンプレート、スタイルファイルなど、さまざまなコンポーネントファイル間を移動する必要があります。コード内を移動するには、以下のオプションを使用できます。

また、 Angular CLI QuickSwitch プラグイン(英語)をダウンロードして、コンピューターにインストールすることもできます。

使用箇所を移動する

シンボルの宣言にキャレットを置き、 Ctrl+B を押します。
シンボルが 1 回だけ使用されている場合、GoLand はその使用箇所に移動してハイライトします。
使用箇所が複数見つかった場合、GoLand はそれらをポップアップで表示します。移動する使用箇所を選択して Enter を押すか、リストでクリックします。
シンボルの宣言にキャレットを置き、 Ctrl+Alt+F7 を押します。
ツールバーのアイコンを使用して、インポートステートメント ( )、文字列リテラル ( )、および HTML ファイル () 内のコンポーネントへの参照を表示または非表示にします。
使用方法のヒントを表示をクリックすると使用方法に移動するか、リストから関連するものを選択できます。

ナビゲーションポップアップを使用する

ナビゲーションポップアップを有効にするには、 Ctrl+Alt+S を押して詳細設定に移動し、 Angular エリアのエディターにナビゲーションポップアップを表示するチェックボックスを選択します。検索フィールドを使用すると、チェックボックスを簡単に見つけることができます。
ナビゲーションポップアップにアクセスするには、エディター内の任意の場所にマウスを移動します。ポップアップに表示されるアイコンのセットは、現在のエディタータブ内のファイルの種類と、コンポーネントに含まれるファイルによって異なります。
コンポーネント内のファイル間をジャンプするには該当アイコンをクリックします。例えば .component.html ファイルへジャンプにはをクリックします。
ポップアップを使用して、ファイル内のスタイルとテンプレートに移動します。
をクリックすると、関連ファイルのリストを含むポップアップが開きます。

Angular マテリアルデザインコンポーネントを使用する

GoLand は Angular Material のコンポーネントや属性を認識し、コーディング支援を提供します：

コンポーネントの補完
属性の補完
コンポーネントまたは属性とその宣言の間のナビゲーション（Ctrl+B を押すか、コンテキストメニューから移動 | 宣言を選択します）。

Angular マテリアルをインストール

埋め込みターミナル（Alt+F12 ）を開き、 ng add @angular/material と入力します。
package.json の 依存関係 に "@angular/material": "^16.2.11" を追加し、 npm install を実行します。
メインメニューでファイル | 新規 | Angular の依存関係に移動し、リストから @angular/material を選択して、開始されるウィザードの手順に従います。

Angular マテリアルの公式 Web サイトでの開始(英語)の詳細を参照してください。

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

Angular プロジェクト内で、GoLand は CSS クラスやプロパティ、HTML 属性やタグ、Angular の入出力バインディングなど様々なシンボルを認識し、ハイライト表示します。これらのシンボルは、HTML 属性や JavaScript 文字列リテラルなど、様々なコンテキストでハイライト表示されます。

環境設定や習慣にあわせて Angular 対応の構文ハイライトを設定できます。

設定ダイアログ（Ctrl+Alt+S ）でエディター | カラースキームの切り替え | Angular テンプレートに移動します。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントで説明されているようにカスタマイズします。

プロジェクト内で複数のフレームワークを使用する

時には 1 つの Angular プロジェクト内で他のフレームワークを使用する必要が生じる場合もあります。

各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。このファイルの設定は、デフォルトの構成を上書きします。

プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。
.ws-context では、次の 2 種類のプロパティを使用します。
- コンテキスト値文字列を持つ <context-name>
- コンテキスト詳細オブジェクトを持つ GLOB パターン
次のコンテキスト値を使ってください：
- フレームワーク: vue、 angular、 react、 svelte、 astro
- angular-template-syntax： V_2、 V_17
- nextjs-project: nextjs
- astro-project: astro
- vue-store： vuex、 pinia
- vue-class-component-library: vue-class-component、 vue -property-decorator、 vue-facing-decorator
- jsdoc-dialect： jsdoc-typescript、 jsdoc-closure
簡単にするためにパスのネストを使用します。
- GLOB パスの最後のセグメントはファイル名パターンであり、 * ワイルドカードのみがサポートされます。
- 最後のセグメントが ** の場合、ネストされたすべてのディレクトリとファイルと一致します。
- 最上位レベルのコンテキストプロパティには /** パターンが必要です。
複数のパターンが同一ファイル名に一致する場合、曖昧さ解消には次のルールが使われます：
- ** セグメントを除いて、パスセグメント数が最大となるパターンを選択します。
- 純粋なファイル名パターン、つまり ** または / で終わらないものを選択してください。
- 最初に定義されたパターンを選択します。

サンプル

さまざまなフォルダーで使用されている多数のフレームワークを含むプロジェクトがあるとします。

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。

{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}
        
   

2026 年 5 月 22 日