Angular
Angular(英語) は、クロスプラットフォームアプリケーションを構築するための一般的なフレームワークです。 WebStorm は Angular のサポートを提供し、新しい Angular アプリの作成やコンポーネントの作業からデバッグやテストまで、開発プロセスのすべてのステップで役立ちます。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
設定で Angular と AngularJS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに Angular と AngularJS と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。
新しい Angular アプリケーションを作成する
新しい Angular アプリケーションの構築を開始する推奨方法は、WebStorm が npx を使用してダウンロードおよび実行する Angular CLI です。 その結果、アプリケーションはすぐに使える TypeScript と webpack 構成でブートストラップされます。
もちろん、Angular CLI を自分でダウンロードすることも、空の WebStorm プロジェクトを作成して 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 を押すと、WebStorm に使用可能なオプションとその説明が表示されます。
Angular バージョン 16(英語) 以降を使用している場合は、 スタンドアロンのコンポーネントを使用した新規プロジェクトの作成 チェックボックスを選択することもできます。 詳細については、 Angular オフィシャル Web サイト(英語)を参照してください。
作成 をクリックすると、WebStorm は必要なすべての構成ファイルを備えた Angular 固有のプロジェクトを生成し、必要な依存関係をすべてダウンロードします。
空の WebStorm プロジェクトを作成する
ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規 プロジェクト ダイアログが開きます。
左側のペインで、 空のプロジェクト を選択します。
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
作成 をクリックすると、WebStorm は 空のプロジェクトを作成して開きます。
空のプロジェクトに Angular をインストールする
Angular を使用する空のプロジェクトを開きます。
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install @angular/coreこれにより、フレームワークの重要なランタイム部分とともにコア Angular パッケージがインストールされます。
Angular の一部である他のパッケージのインストールも必要な場合がありますので、 パッケージ一覧 を参照してください。
既存の Angular アプリケーションから始める
既存の Angular アプリケーションの開発を続けるには、WebStorm で開いて、必要な依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面で 開く をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面で リポジトリのクローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする（クローン） を参照してください。
依存関係をダウンロードする
ポップアップで 'npm install' を実行 または 'yarn install' を実行 をクリックします。
npm、 Yarn 1 または Yarn 2 を利用可能です。詳細は npm と Yarn を参照してください。
または、エディターの package.json のコンテキストメニュー、または プロジェクト ツールウィンドウ (Alt+1) で 'npm install' を実行 または 'yarn install' を実行 を選択します。
プロジェクトのセキュリティ
WebStorm の外部で作成されインポートしたプロジェクトを開くと、WebStorm は未知のソースコードをどう扱うか選択できるダイアログを表示します。
次のいずれかのオプションを選択します：
セーフモードでプレビュー ：この場合、WebStorm はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
WebStorm はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックしていつでもプロジェクトをロードできます。
プロジェクトを信頼 ：この場合、WebStorm はプロジェクトを開いてロードします。 つまり、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が利用可能になります。
開かない ：この場合、WebStorm はプロジェクトを開きません。
詳細は プロジェクトのセキュリティ をご覧ください。
コードを記述して編集する
この章では、Angular 固有のヒントを提供します。 一般的なガイドラインについては、 ソースコードの作成と編集 および TypeScript を参照してください。
Angular 言語サービスを構成する
WebStorm は、コード補完、エラー検出とハイライト表示、ヒント、Angular テンプレート内のナビゲーションなど、Angular 固有の完全なコーディング支援を提供します。 Angular プロジェクトのコーディング支援は、 Angular 言語サービス、 TypeScript 言語サービス 、または内部 WebStorm パーサーとコードインスペクションのみから取得できるように設定できます。
デフォルトでは、Angular 言語サービスは有効になっており、ステータスバーの 言語サービス ウィザードに表示されます。
Angular 設定を開くには、ステータスバーの
をクリックし、 
をクリックします。
または、 Ctrl+Alt+S を押して設定を開き、 設定 | 言語 & フレームワーク | TypeScript | Angular を選択します。
.ts ファイルのコーディング支援を受けるサービスを指定します。
デフォルトでは 自動 オプションが選択されているため、WebStorm は適切なコンテキストで Angular 言語サービス を自動的に有効にします。 その結果、型評価は TypeScript 言語サービスのデータを元に行われ、内部 WebStorm インスペクションも適用されます。
内部 WebStorm パーサーとインスペクションのデータのみでコーディング支援を取得するには、 無効 オプションを選択します。
Angular 言語サービスを再起動する
ステータスバーの
をクリックし、 Angular TypeScript <バージョン> の横にある 
をクリックします。
型評価を構成する
ステータスバーの
をクリックし、型評価を取得したいサービスの横にあるチェックボックスをオンにします。 準備ができたら、WebStorm を再起動してください。
または、 Ctrl+Alt+S を押して設定を開き、 設定 | 言語 & フレームワーク | TypeScript | Angular を選択し、 自動 を選択して、 サービス駆動型タイプエンジンを有効にする チェックボックスを選択します。
デフォルトではチェックボックスがオフになっているため、型評価や解決、コードインスペクション・リファクタリングは WebStorm 内部 TypeScript エンジンの型情報が使われます。
このデフォルトの動作は、WebStorm の内部 TypeScript エンジンが使用する型評価アルゴリズムが Angular 言語サービスのアルゴリズムと異なるため、パフォーマンス上の問題や型解決のバグを引き起こす可能性があります。 チェックボックスをオンにすることで、これらの問題を回避できる場合があります。
メモリ処理を構成する
WebStorm は言語サービスとのスムーズな統合を目指していますが、WebStorm 自体でなく言語サービスによって引き起こされる out-of-memory エラーが発生する場合があります。
out-of-memory エラーを防止、またはシームレスに解決して言語サービスの安定した動作を確保するには、メモリ処理を設定する必要があります。 詳しくは 言語サービス を参照してください。
Angular 言語サービスのメモリ処理設定は、常に TypeScript 言語サービスから継承されます。
TypeScript 言語サービスのメモリ処理を構成する
Ctrl+Alt+S を押して設定を開き、 に移動します。
言語サービスメモリ 領域で、メモリ処理モードを選択します。
メモリを増やし、言語サービスを自動的に再起動するには、 利用可能な場合はメモリを自動的に増加します を選択します。
または、 メモリ制限を設定する を選択し、言語サービスで使用する最大メモリを指定します。
指定されたメモリサイズが利用可能な RAM を超えた場合、WebStorm はツールチップで適切な値を提案します。
コンポーネント
WebStorm を使うと、Angular コンポーネントをいくつかの方法で作成できます：
関連する .ts 、 .html 、 .css ファイルの束を含む コンポーネントフォルダーを作成します。
専用のリファクタリングを使用した テンプレートからコンポーネントを抽出します。
事前定義されたテンプレートを使用してコンポーネントを作成する
WebStorm は、Angular コンポーネントを作成するための事前定義された ライブテンプレート （例えば a-component、 a-component-inline、 a-component-root など）を提供します。
ライブテンプレートの詳細については、 ライブテンプレート を参照してください。
事前定義されたテンプレートの完全なリストを表示するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 Angular ノードを展開します。
エディターで、 Ctrl+J を押し、リストから適切なテンプレート（たとえば、
a-component）を選択してから、 Enter を押します。WebStorm はコンポーネントスタブを生成し、キャンバスのあるフィールドにキャレットを配置し、そこでコンポーネント名が指定されるのを待ちます。 コンポーネント名を入力すると、 Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。
必要に応じて、インスペクションポップアップを使用して新しいコンポーネントを スタンドアロン(英語)にします。
WebStorm ブログで、 コードスニペットの使用と作成(英語)の変数を使用してテンプレートをカスタマイズする方法を学びます。
コンポーネントフォルダーを作成する
WebStorm では、Angular コンポーネント用の複数のファイルを一度の操作で作成し、それらすべてを別のフォルダーに配置することもできます。 これを行うには、複数の子テンプレートを持つファイルテンプレートを使用する必要があります。 親テンプレートからファイルを作成すると、子テンプレートから関連ファイルが自動的に生成されます。 詳細については、 複数ファイルのテンプレート を参照してください。
たとえば、ロジック用の example.component.ts 、テンプレート用の example.component.html 、スタイル用の example.component.css など、多数のコンポーネントファイルを含む example フォルダーを作成するとします。 2 つの親テンプレートを含むファイルテンプレートを作成すると、3 つのファイルすべてが一度に生成され、別のフォルダーに配置されます。
設定 ダイアログ（Ctrl+Alt+S ）で、 を選択します。
まず、TypeScript コンポーネントファイルのテンプレートを作成します：
ファイル タブで、ツールバーの 追加 ボタン (
) をクリックします。
新しい 名前未設定 テンプレートがリストに追加されます。
右側のペインで、テンプレート名を指定し、 Angular コンポーネント とし、ファイル拡張子として
component.tsとします。ファイル名 フィールドに
$NAME/$NAMEと入力します。必要に応じて、コードテンプレートを追加します。例:
/* * Created by ${USER} on ${DATE} */ import { Component } from '@angular/core';
適用 をクリックしてください。
関連する HTML ファイルの子テンプレートを作成します：
親テンプレート Angular コンポーネント を選択し、ツールバーの 子テンプレートファイルを作成する ボタン
をクリックします。
子テンプレートが Angular コンポーネント テンプレートに追加されます。
右側のペインで、 ファイル名 フィールドに
$NAME/$NAMEと入力し、component.html拡張子を指定します。
適用 をクリックしてください。
関連するスタイルシートの子テンプレートを作成します。
親テンプレート Angular コンポーネント を選択し、ツールバーの
をクリックします。 子テンプレートが Angular コンポーネント テンプレートに追加されます。右側のペインで、 ファイル名 フィールドに
$NAME/$NAMEと入力し、component.css拡張子を指定します。
OK をクリックしてテンプレートを保存します。
コンポーネントファイルを作成します。
コンポーネントファイルを保存するフォルダーのコンテキストメニューから、 を選択します。 開いたダイアログで、フォルダーとその中のコンポーネントファイル（この例では example ）に使用される名前を指定します。
テンプレートからコンポーネントを抽出する
Angular コンポーネントを抽出しますリファクタリングは、 angular.json ファイル内の schematic 設定を考慮して、 ng generate component を実行することで機能します。
HTML テンプレートファイルで、Angular コンポーネントに抽出したいコードフラグメントを選択します。
選択のコンテキストメニューから を選択します。
または、 Ctrl+Alt+Shift+T を押して、 リファクタリング ポップアップから を選択します。
開いたダイアログで、新しいコンポーネント名を指定します。
スタンドアロンコンポーネント
プロジェクトで Angular 19(英語) を使用している場合、コンポーネント、パイプ、ディレクティブはデフォルトで standalone になります。 NgModules で宣言されているコンポーネントの場合は、 standalone: false を設定してください。
WebStorm は、 non-standalone パイプ、ディレクティブやコンポーネントの不正なインポート、および非スタンドアロンコンポーネント内での imports プロパティの使用を検出します：
シグナル
WebStorm を使うと、 signal、 computed、 effect テンプレートから直接 Angular シグナル を簡単に作成できます。
シグナルを作成する
必要な関数を書きます。 WebStorm はインスペクションを実行し、新しい関数を未解決としてハイライトします。
ハイライトされた関数の上にマウスを置き、ポップアップ内の シグナル '<function name>' を作成； リンクをクリックします。
あるいは、ハイライトされた機能にカーソルを置き、 Alt+Enter を押して、 を選択します。
WebStorm を選択すると、新しいシグナルのスタブが生成されたコンポーネント TypeScript ファイルが表示されます。 必要に応じてプレースホルダーを入力します。
WebStorm は、 contentChild、 contentChilden、 viewChild、 viewChildren signal クエリ を認識してハイライトし、ドキュメントや補完の提供、ナビゲーションもサポートします。
Angular シグナルのハイライトを構成する
Ctrl+Alt+S を押して設定を開き、 エディター | カラースキームの切り替え | Angular テンプレート を選択してください。
リストから シグナル を選択し、 フォアグラウンド の横にある色の表示をクリックします。
好みの色を選択し、 適用 をクリックします。
構造ディレクティブ
WebStorm は 構造ディレクティブ を認識し、テンプレート内でハイライトを提供します。
バインディングキーとテンプレートコンテキストプロパティについては、ポップアップで補完が提案されます。
ディレクティブ入力にマップされたテンプレートバインディングキーに対して、 名前変更リファクタリングが提供されます。
属性を完了するか、 Ctrl+P を押すと、パラメーター情報ポップアップが自動的に表示されます。
ホストリスナーとバインディング
WebStorm は ホストリスナー および バインディング を完全にサポートします。
@HostListenerおよび@HostBindingデコレータの補完、ハイライト、簡単なドキュメント化。
@HostListenerのイベント完了
型チェックブロック (TCB)(英語) はホストバインディング用に生成されます。
ホストバインディングと HTML テンプレートにわたる CSS クラスのサポート
反応型
WebStorm は Angular 反応型フォーム のサポートを提供します。
new FormGroup({.. .})およびFormBuilder.group({...})呼び出しを使用したフィールド初期化子からネストされたフォームグループモデル構造を構築し、FormBuilder.group({...})呼び出しを使用したコンストラクター内のフィールド初期化も行います。WebStorm は、フォームグループオブジェクトのイニシャライザー、新しいインスタンス呼び出し (
FormGroup、FormControl、FormArray)、およびFormBuilderメソッド内のcontrol、group、arrayを認識します。
FormGroup.get()の呼び出しに対して、WebStorm はコード補完、名前検証、不明なセグメントへのクイックフィックス、文字列リテラル内の構文ハイライトを提供します。
HTML テンプレートの
formControlName、formGroupName、formArrayName、コード補完、名前検証、欠落しているコントロールを作成するためのクイックフィックス、構文のハイライト、構造の依存関係が提供されます。
段階的な水分補給
WebStorm は 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 Material をプロジェクトに追加する方法を示しています。
package.json で手動で依存関係を管理している場合でも、WebStorm は ng add をサポートするパッケージも認識します。 package.json にそのようなパッケージを追加すると、WebStorm は ng add を使ってインストールすることを提案します。
Angular Schematics でコード生成
WebStorm は、 @angular/material などのライブラリで定義された schematics と、Angular CLI に定義された schematics の両方を使ってコードを生成できます。
メインメニューから を選択するか、 プロジェクト ツールウィンドウで Alt+Insert を押してから Angular Schematic を選択します。
リストから、関連する schematic を選択します。 schematics の名前の入力を開始すると、入力するにつれてリストが縮小します。
表示されたダイアログで、生成する schematic の名前と、必要に応じて追加オプションを指定します。 WebStorm は schematic の説明を表示し、利用可能なオプションのコード補完と説明を提供します。
パラメーターのヒントを表示する
Angular HTML テンプレートでは、 パラメーターヒントはメソッドと関数のパラメーター名を表示し、コードの可読性を向上させます。 テンプレートでは、ブロックパラメーターの情報は補完時に表示されます。
パラメーターのヒントを設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
パラメーター名 の Angular HTML テンプレート を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューでは設定の変更がコードの見た目にどう影響するかが表示されます。
一部のメソッドや関数では、WebStorm はどのコンテキストでもパラメーターヒントを表示しません。 除外リスト… をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、 パラメーター名 の Angular HTML テンプレート チェックボックスをオフにします。
コードをインスペクションする
WebStorm には、コードの編集時にエラーを見つけて、その修正方法も提案してくれる、Angular 専用のインスペクションが多数用意されています。
重複したプロパティ
以下の例では、 template と templateUrl の両方のプロパティが使用されています。 WebStorm はエラーを検出して警告を出し、クイックフィックスを提案します。
構造ディレクティブの誤った使用
WebStorm は *ngIf および *ngFor 構造ディレクティブの誤った使い方について警告します。
スタンドアロンコンポーネントの使用
Angular 固有のインスペクションは、 スタンドアロンコンポーネント(英語)の不適切な使用を特定できます。 下記の例では、WebStorm がスタンドアロンでないコンポーネントのインポート文を検出し、問題のクイックフィックスも提示します。
未使用のインポート
standalone コンポーネントでは、WebStorm が未使用のコンポーネント、パイプ、ディレクティブのインポートステートメントを検出し、削除を提案します。
未使用のインポートステートメントは、ファイルの再フォーマット時にも自動的に削除できます (Ctrl+Alt+Shift+L)。
クイックフィックスとコンテキスト認識アクション
transform プロパティの有無にかかわらず、Angular コンポーネントテンプレートから @Input および @Output プロパティを作成するためのクイックフィックスを使用すると便利な場合があります。 必要なインポートステートメントも自動的に生成されることに注意してください。
WebStorm は、適切に宣言されたフィールドを生成するのに役立つ、コンテキスト認識型の フィールドの作成 および メソッドの作成 アクションも提供します。
Angular 固有のインスペクションの表示と構成
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
Angular ノードを展開します。
インスペクションのプロファイルと重大度を設定し、事前定義のインスペクションを無効化・抑制し、 コードインスペクション の説明に従ってカスタムインスペクションを作成できます。
Angular アプリケーションを移動する
また、 Angular CLI QuickSwitch プラグイン(英語)をダウンロードして、 コンピューターにインストールすることもできます。
関連シンボルポップアップで移動
関連ファイルのリストを含むポップアップを呼び出すには、次のいずれかの操作を実行します。
ナビゲーションポップアップで
をクリックします。Ctrl+Alt+Home を押す。
メインメニューから を選択します。
エディター内の任意の領域を右クリックし、 を選択します。
ナビゲーションポップアップで
をクリックします。
TypeScript コンポーネントファイルでは、このファイルにインポートされたすべてのシンボルもポップアップに一覧表示されます。
ファイルを開くには、ファイルを選択して Enter を押します。 または、各ファイルの種類に関連付けられている番号を使用します。
コンポーネントクラスを含む TypeScript ファイル
テンプレート
テスト
スタイル
使用箇所を移動する
シンボルの宣言にキャレットを置き、 Ctrl+B を押します。
シンボルが一度だけ使われている場合、WebStorm はこの使用箇所へ移動し、ハイライトします。
複数の使用箇所が見つかった場合、WebStorm はそれらをポップアップで表示します。 移動する使用箇所を選択して Enter を押すか、リストでクリックします。
シンボルの宣言にキャレットを置き、 Ctrl+Alt+F7 を押します。
ツールバーのアイコンを使用して、インポートステートメント (
)、文字列リテラル (
)、および HTML ファイル (
) 内のコンポーネントへの参照を表示または非表示にします。使用方法のヒントを表示をクリックすると使用方法に移動するか、リストから関連するものを選択できます。
ナビゲーションポップアップを使用する
ナビゲーションポップアップを有効にするには、 Ctrl+Alt+S を押して に移動し、 Angular エリアの エディターにナビゲーションポップアップを表示する チェックボックスを選択します。 検索フィールドを使用すると、チェックボックスを簡単に見つけることができます。
ナビゲーションポップアップにアクセスするには、エディター内の任意の場所にマウスを移動します。 ポップアップに表示されるアイコンのセットは、現在のエディタータブ内のファイルの種類と、コンポーネントに含まれるファイルによって異なります。
コンポーネント内でファイル間を移動するには、対応するアイコンをクリックしてください。たとえば、 .component.html ファイルに移動するには
をクリックします。ポップアップを使用して、ファイル内のスタイルとテンプレートに移動します。
- をクリックすると、関連ファイルのリストを含むポップアップが開きます。
Angular マテリアルデザインコンポーネントを使用する
WebStorm は Angular Material のコンポーネントと属性を認識し、それらに対してコーディング支援を提供します：
コンポーネントの補完
属性の補完
コンポーネントまたは属性とその宣言の間のナビゲーション（Ctrl+B を押すか、コンテキストメニューから を選択します）。
Angular マテリアルをインストール
埋め込み ターミナル （Alt+F12 ）を開き、
ng add @angular/materialと入力します。package.json の
dependenciesに"@angular/material": "^16.2.11"を追加し、npm installを実行します。メインメニューで に移動し、リストから
@angular/materialを選択して、開始されるウィザードの手順に従います。
Angular マテリアルの公式 Web サイトでの開始(英語)の詳細を参照してください。
構文ハイライトを構成する
Angular プロジェクトでは、WebStorm が CSS クラスやプロパティ、HTML 属性やタグ、Angular の入力・出力バインディングといったさまざまなシンボルを認識し、ハイライト表示します。 これらのシンボルは、HTML 属性や JavaScript 文字列リテラルなど、様々なコンテキストでハイライト表示されます。
好みや慣習に応じて、Angular 向けの構文ハイライトを設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定をそのまま使用するか、 カラースキーム：エディターのフォントと色彩 の説明に従ってカスタマイズしてください。
プロジェクト内で複数のフレームワークを使用する
場合によっては、Angular プロジェクト内で他のフレームワークを使用する必要があることがあります。
各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。 このファイルの設定は、デフォルトの構成を上書きします。
プロジェクトルートで、コンテキストメニューから 新規 | ファイル を選択し、ファイル名として
.ws-contextを指定します。.ws-contextでは、次の 2 種類のプロパティを使用します。コンテキスト値文字列を持つ
<context-name>コンテキスト詳細オブジェクト付き GLOB パターン
次のコンテキスト値を使用してください：
framework:vue、angular、react、svelte、astroangular-template-syntax:V_2、V_17nextjs-project:nextjsastro-project:astrovue-store:vuex、piniavue-class-component-library:vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect:jsdoc-typescript、jsdoc-closure
簡単にするためにパスのネストを使用します。
GLOB パスの最後のセグメントはファイル名パターンであり、
*ワイルドカードのみがサポートされます。最後のセグメントが
**の場合、ネストされたすべてのディレクトリとファイルと一致します。最上位レベルのコンテキストプロパティには
/**パターンが必要です。
複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます：
**セグメントを除いて、パスセグメント数が最大となるパターンを選択します。純粋なファイル名パターン、つまり
**または/で終わらないものを選択してください。最初に定義されたパターンを選択します。
サンプル
さまざまなフォルダーで複数のフレームワークを使うプロジェクトがあるとします。
プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。