Angular

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

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で Angular と AngularJS プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Angular と AngularJS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

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

新しい Angular アプリケーションの構築を開始する推奨方法は Angular CLI(英語) です。WebStorm はこれをダウンロードし、npx(英語) を使用して実行します。その結果、アプリケーションはすぐに使用できる TypeScript および Webpack 構成でブートストラップされます。

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

ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、Angular CLI を選択します。
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Node インタープリターフィールドに、使用する 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 に渡す追加の新しいオプション(英語)を指定します。このフィールドではコード補完を使用できます。オプションの名前を入力し始めるか、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 | クローン、VCS | バージョン管理から取得を選択します。
メインメニューの 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 言語サービスのアルゴリズムと異なるため、パフォーマンスの問題や型解決のバグが発生する可能性があります。チェックボックスを選択すると、これらの問題を回避できる場合があります。
TypeScript ページの TypeScript 言語サービスチェックボックスが選択され、Angular 言語サービスが自動状態にある場合、サービス駆動型エンジンを有効にするチェックボックスが選択されているかオフになっているかに関係なく、一部のコードのハイライトと補完は常に適切な言語サービスから取得されます。

コンポーネント

WebStorm を使用すると、いくつかの方法で Angular コンポーネントを作成できます。

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

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

WebStorm は、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 を押します。
WebStorm はコンポーネントスタブを生成し、キャンバスのあるフィールドにキャレットを配置し、そこでコンポーネント名が指定されるのを待ちます。コンポーネント名を入力すると、Angular スタイルガイド(英語)に従ってセレクターの名前とテンプレート URL が自動的に入力されます。
必要に応じて、インスペクションポップアップを使用して新しいコンポーネントをスタンドアロン(英語)にします。

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

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

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

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | ファイルおよびコードテンプレートを選択します。
まず、TypeScript コンポーネントファイルのテンプレートを作成します。
1. ファイルタブで、ツールバーの追加ボタン () をクリックします。
  新しい Unnamed テンプレートがリストに追加されます。
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 を押して、リファクタリングポップアップからコンポーネントの抽出を選択します。
開いたダイアログで、新しいコンポーネントの名前を指定します。

Extract an Angular component from a template

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

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

WebStorm は、non-standalone パイプ、ディレクティブ、コンポーネントの不正なインポートと、非スタンドアロンコンポーネント内の imports プロパティの使用を検出します。

Incorrect usage imports directives in non-standalone components

シグナル

WebStorm を使用すると、シグナル(英語)、計算(英語)、およびエフェクト(英語)のテンプレートから直接 Angular シグナル(英語)を簡単に作成できます。

シグナルを作成する

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

WebStorm は、contentChild、contentChilden、viewChild、viewChildren シグナルクエリ(英語)を認識し、ハイライトし、ドキュメントと補完を提供し、ナビゲーションをサポートします。

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 マテリアルをプロジェクトに追加する方法を示しています。

package.json を使って手動で依存関係を管理している場合でも、WebStorm は ng add をサポートするパッケージを認識します。package.json にそのようなパッケージを追加すると、WebStorm は ng add と一緒にそれをインストールすることを提案します。

WebStorm suggests adding a dependency with 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 テンプレートチェックボックスをオフにします。

Configure parameter hints in Angular templates

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

WebStorm は、多くの Angular 固有のインスペクションをもたらします。これは、コードを編集するときにエラーを見つけて、それらの迅速な修正を提案できます。

重複したプロパティ

以下の例では、template と templateUrl の両方のプロパティが使用されています。WebStorm はエラーを検出し、それについて警告し、迅速な解決策を提案します。

Angular inspection: duplicate properties

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

WebStorm は、*ngIf および *ngFor 構造ディレクティブの誤った使用について警告します。

Angular inspection: incorrect use of structural directive

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

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

未使用のインポート

standalone コンポーネントでは、WebStorm は未使用のコンポーネント、パイプ、ディレクティブのインポートステートメントを検出し、削除することを提案します。

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

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

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

Quick-fix to generate @Input and @Output properties

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

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

設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションに移動します。
Angular ノードを展開します。
インスペクションのプロファイルと重大度を設定し、事前定義のインスペクションを無効にして抑制し、コードインスペクションの説明に従ってカスタムのものを作成します。

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

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

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

使用箇所を移動する

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

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

WebStorm は Angular マテリアル(英語)のコンポーネントと属性を認識し、コーディング支援を提供します。

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

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

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

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

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

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

Highlighting symbols in various contexts

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

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

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

場合によっては、1 つの Angular プロジェクト内で他のフレームワークを使用する必要があることがあります。

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

プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。
.ws-context では、次の 2 種類のプロパティを使用します。
- コンテキスト値文字列を持つ <context-name>
- コンテキスト詳細オブジェクトを持つ GLOB パターン
次のコンテキスト値を使用します。
- framework : 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"
  }
}
        

最終更新日: 2025 年 4 月 10 日