WebStorm 2025.1 ヘルプ

Astro

WebStorm は、構文のハイライト、自動インポートによるコード補完、リファクタリング、ナビゲーション、インテンション、コードの折りたたみ、Emmet のサポート、正しいフォーマットなどの基本的な Astro Web フレームワーク(英語)機能を提供します。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Astro プラグインをインストールして有効にします。

Astro アプリケーションを作成する

  1. コマンドラインシェルまたは組み込みのターミナル (Alt+F12) を開き、使用しているパッケージマネージャーに応じて次のいずれかのコマンドを入力します。

    • npm の npm create astro@latest

    • pnpm の pnpm create astro@latest

    • Yarn 用 yarn create astro

  2. 開始するウィザードの質問に答えます。

    • アプリケーションを作成するフォルダーを ./<project_name> の形式で指定します。

    • また、スターターテンプレート(英語)を使用した Astro 公式サンプルに基づいてアプリケーションを作成するかどうかも指定します。

    Astro: project generation wizard

  3. Astro 固有の構造 ( ファイル | オープン ) を使用して生成されたアプリケーションを開きます。

Astro オフィシャル Web サイト(英語)の詳細を参照してください。

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

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

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

  • ウェルカム画面でオープンをクリックするか、メインメニューからファイル | オープンを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

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

  1. ウェルカム画面でリポジトリのクローンをクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、Git | クローン、VCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • または、エディターの package.json のコンテキストメニューまたはプロジェクトツールウィンドウ Alt+1 から 'npm install' の実行または実行 'yarn install' を選択します。

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

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

Untrusted project warning

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

  • セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

アプリケーションを実行する

Run anAstro application

  1. package.json を開き、ガターで start または dev スクリプトの横にある the Run button をクリックし、コンテキストメニューから実行 'start' を選択します。

  2. ブラウザーでアプリケーションを開くには、実行ツールウィンドウのリンクをクリックします。

    アプリケーションの実行中、コードに加えたすべての変更はすぐにページに反映されます。

Astro 言語サーバーを構成する

  1. Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | TypeScript | Astro を選択します。

    または、ステータスバーの言語サービスウィジェットをクリックし、Astro を選択して、the Open Settings icon をクリックします。

    Language Service widget

  2. 使用する Astro 言語サーバーパッケージを指定します。

    Specify the Astro package to use

  3. コーディング支援に Astro 言語サーバーのデータを使用するかどうかを指定します。

    • デフォルトでは、自動オプションが選択されているため、WebStorm は適切なコンテキストで Astro 言語サーバーとの統合を自動的に有効にします。

    • 内部 WebStorm パーサーとインスペクションからのデータのみに基づいてコーディング支援を取得するには、無効オプションを選択します。

コーディング支援

WebStorm は、構文のハイライト、自動インポートを備えたコード補完、リファクタリング、ナビゲーション、インテンションアクション、正しいフォーマットとコードの折りたたみなどの基本的な Astro 機能、および Emmet のサポートを提供します。

コード補完

共通の補完に加えて、WebStorm は Astro 固有のシンボルの補完を提供します。

WebStorm は、入力時に補完候補を表示します。あるいは、完了するシンボルにキャレットを置き、Ctrl+Space を押します。

Astro: basic completion

クラウドの完成

WebStorm は、props 用のクラウドの完成(英語)、インポートステートメント、および Astro アプリケーションのテンプレート部分のタグを提供します。

AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。

Cloud Completion は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。

クラウド補完を有効にする

  1. AI Assistant プラグインをインストールして有効にします(英語)。

  2. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。

  3. クラウド補完候補を有効にするチェックボックスを選択します。ユニバーサル補完チェックボックスを選択します。

    Enable Cloud Completion

自動インポート

WebStorm は、コードを入力または完了すると、その場で import ステートメントを生成します。

Astro: insert import statements on completion

インポートされていないシンボルには下線が付いています。import ステートメントを挿入するには、下線付きの記号の上にマウスを置き、ポップアップ内のインポート <シンボル名> リンクをクリックします。

Astro: import popup

あるいは、インポートするシンボルにキャレットを置き、Alt+Enter を押して、リストからインポート <シンボル名> を選択します。

Astro: insert import quick fix

自動インポートの詳細を参照してください。

コードのリファクタリング

WebStorm は、Astro 固有のコンテキストでの抽出およびインラインリファクタリングをサポートします。

Astro: refactoring code

  • リファクタリングするコードフラグメントを選択するか、その中にキャレットを配置し、Ctrl+Alt+Shift+T を押して、リストから必要なリファクタリングを選択します。

コードリファクタリング、JavaScript のリファクタリング、TypeScript のリファクタリングの詳細を参照してください。

コンポーネントの使用箇所を移動する

インレイヒントを使用して、コンポーネントからその使用箇所に移動します。コンポーネントが複数回使用されている場合、WebStorm は検出された使用箇所のリストを表示します。関連する使用箇所を選択して、そこに移動します。

Astro: Navigate with Component Usages

コンポーネントの使用箇所を表示ヒントはデフォルトで表示されます。これをオフにするには、Ctrl+Alt+S を押して設定を開き、エディター | インレイヒントを選択します。次に、コードビジョンのコンポーネントの使用箇所チェックボックスをオフにします。

または、エディターでコンポーネントの使用箇所を表示ヒントを右クリックし、コードビジョンを隠す: コンポーネントの使用箇所のインレイヒントを選択します。

Turn off Component usages in the editor

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

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

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

  1. プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。

  2. .ws-context では、次の 2 種類のプロパティを使用します。

    • コンテキスト値文字列を持つ <context-name>

    • コンテキスト詳細オブジェクトを持つ GLOB パターン

  3. 次のコンテキスト値を使用します。

    • 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

  4. 簡単にするためにパスのネストを使用します。

    • GLOB パスの最後のセグメントはファイル名パターンであり、* ワイルドカードのみがサポートされます。

    • 最後のセグメントが ** の場合、ネストされたすべてのディレクトリとファイルと一致します。

    • 最上位レベルのコンテキストプロパティには /** パターンが必要です。

  5. 複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます。

    • ** セグメントを除いて、パスセグメント数が最大となるパターンを選択します。

    • 純粋なファイル名パターンであるパターンを選択します。つまり、** または / で終わらないパターンを選択します。

    • 最初に定義されたパターンを選択します。

サンプル

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

A project with different frameworks

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .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" } }
AngularJS Bower

関連ページ：

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン)：WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

npm、pnpm、Yarn

WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...

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

潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースが不明な場合にプロジェクトをどのように操作するかを決定できます。WebStorm では、実行されるタスク、File Watchers、または webpack 構成について警告し、信頼できるソースを構成できます。不明なソースからプロジェクトを開く：WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定でき...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードをすばやく移動することができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットで移動する前のキャレット位置を見るには、メインメニューからを選択するか、を押します。前に進むには、を選択するかを押します。エディターの上部にすばやく移動するには、を押します。または、を押して、キャレットをエディターの下部に移動します。最後に編集した場所に移動するには、を