Astro
WebStorm は、構文ハイライト、自動インポートを備えたコード補完、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、Emmet サポート、正しいフォーマットといった Astro Web フレームワーク の基本機能を提供します。
始める前に
コンピューターに Node.js(英語) があることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Astro プラグインをインストールして有効にします。
Astro アプリケーションを作成する
コマンドラインシェルまたは組み込みの ターミナル (Alt+F12) を開き、使用しているパッケージマネージャーに応じて次のいずれかのコマンドを入力します。
npmのnpm create astro@latestpnpmのpnpm create astro@latestYarn 用
yarn create astro
開始するウィザードの質問に答えます。
アプリケーションを作成するフォルダーを
./<project_name>の形式で指定します。また、 スターターテンプレート(英語)を使用した Astro 公式サンプルに基づいてアプリケーションを作成するかどうかも指定します。
Astro 固有の構造 () を使用して生成されたアプリケーションを開きます。
Astro オフィシャル Web サイト(英語)の詳細を参照してください。
既存の Astro アプリケーションから始める
既存の Astro アプリケーションの開発を続けるには、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 はプロジェクトを開きません。
詳細は プロジェクトのセキュリティ をご覧ください。
アプリケーションを実行する
package.json を開き、ガターで
startまたはdevスクリプトの横にある
をクリックし、コンテキストメニューから 実行 'start' を選択します。ブラウザーでアプリケーションを開くには、 実行 ツールウィンドウのリンクをクリックします。
アプリケーションの実行中、コードに加えたすべての変更はすぐにページに反映されます。
Astro 言語サーバーを構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
または、ステータスバーの 言語サービス ウィジェットをクリックし、 Astro を選択して、
をクリックします。
使用する Astro 言語サーバーパッケージを指定します。
コーディング支援に Astro 言語サーバーのデータを使用するかどうかを指定します。
デフォルトで 自動 オプションが選択されているため、WebStorm はどの適切なコンテキストでも自動的に Astro 言語サーバーとの統合を有効にします。
内部 WebStorm パーサーとインスペクションのデータのみでコーディング支援を取得するには、 無効 オプションを選択します。
Specify the location of the @astrojs /ts-plugin(英語) that adds support for
.astroimports in TypeScript files and for renaming symbols and finding references across TypeScript and.astrofiles.
オプション:
In the 構成 area, customize the default Astro configuration options(英語). 設定内容は
.json形式で Astro 言語サーバーに渡されます。
メモリ処理を構成する
WebStorm は言語サービスとのスムーズな統合を目指していますが、WebStorm 自体でなく言語サービスによって引き起こされる out-of-memory エラーが発生する場合があります。
out-of-memory エラーを防止、またはシームレスに解決して言語サービスの安定した動作を確保するには、メモリ処理を設定する必要があります。 詳しくは 言語サービス を参照してください。
Astro 言語サービスのメモリ処理設定は、常に TypeScript 言語サービスから継承されます。
TypeScript 言語サービスのメモリ処理を構成する
Ctrl+Alt+S を押して設定を開き、 に移動します。
言語サービスメモリ 領域で、メモリ処理モードを選択します。
メモリを増やし、言語サービスを自動的に再起動するには、 利用可能な場合はメモリを自動的に増加します を選択します。
または、 メモリ制限を設定する を選択し、言語サービスで使用する最大メモリを指定します。
指定されたメモリサイズが利用可能な RAM を超えた場合、WebStorm はツールチップで適切な値を提案します。
コーディング支援
WebStorm は、構文ハイライト、自動インポートを備えたコード補完、リファクタリング、 ナビゲーション、 インテンションアクション、 正しいフォーマットとコードの折りたたみ、 Emmet サポートなど、Astro の基本機能を提供します。
コード補完
共通補完に加えて、WebStorm は Astro 固有のシンボル向けの補完も提供します。
WebStorm は入力中に補完候補を表示します。 あるいは、完了するシンボルにキャレットを置き、 Ctrl+Space を押します。
クラウド補完
WebStorm は、 クラウド補完を props 、インポートステートメント、Astro アプリケーションのテンプレート部分のタグに提供します。
AI Assistant 搭載のクラウド補完は、プロジェクトのコンテキストに基づき、単一行・コードブロック、関数全体までリアルタイムで自動補完します。
クラウド補完は、コンテキストを考慮して構文的に妥当なソリューションを提案し、さまざまな コードインスペクションを事前に実行して、エラーとなる候補を除外します。
クラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター｜一般｜インライン補完 を選択してください。
クラウド補完候補を有効にする チェックボックスを選択します。 ユニバーサル補完 チェックボックスを選択します。
ドキュメントの検索
WebStorm は、プロジェクトおよびその依存関係のシンボル、そして標準オブジェクトやメソッド、 フレームワーク固有のフラグメントも含めて参照を表示します。
クイックドキュメント ポップアップは、シンボルにマウスを合わせるか、 Ctrl+Q を押すと表示されます。 詳しくは クイックドキュメントルックアップ を参照してください。
自動インポート
WebStorm は、入力やコード補完時にその場でインポートステートメントを生成します。
インポートされていないシンボルには下線が付いています。 import ステートメントを挿入するには、下線付きのシンボルの上にマウスを置き、ポップアップ内の <シンボル名> のインポート リンクをクリックします。
あるいは、インポートするシンボルにキャレットを置き、 Alt+Enter を押して、リストから <シンボル名> のインポート を選択します。
詳細は 自動インポート をご覧ください。
コードのリファクタリング
WebStorm は、Astro 固有のコンテキストにて 抽出および インラインリファクタリングをサポートします。
リファクタリングするコードフラグメントを選択するか、その中にキャレットを配置し、 Ctrl+Alt+Shift+T を押して、リストから必要なリファクタリングを選択します。
詳細については、 コードリファクタリング、 JavaScript のリファクタリング、 TypeScript のリファクタリング を参照してください。
コンポーネントの使用箇所を移動する
インレイヒントを使用して、コンポーネントからその使用箇所に移動します。 コンポーネントが複数回使用される場合、WebStorm は検出された使用箇所のリストを表示します。 関連する使用箇所を選択して、そこに移動します。
コンポーネントの使用箇所を表示 ヒントはデフォルトで表示されます。 これをオフにするには、 Ctrl+Alt+S を押して設定を開き、 エディター｜インレイヒント を選択します。 次に、 コードビジョン の コンポーネントの使用箇所 チェックボックスをオフにします。
または、エディターで コンポーネントの使用箇所を表示 ヒントを右クリックし、 Code Vision: コンポーネントの使用箇所のインレイヒントを非表示 を選択します。
プロジェクト内で複数のフレームワークを使用する
場合によっては、1 つの Astro プロジェクト内で他のフレームワークを使用する必要があることがあります。
各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .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 に追加します。