プロジェクトを作成
WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。
WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用することができます。
空のプロジェクトを作成する
ウェルカム画面の新規プロジェクトをクリックするか、メインメニューからを選択してください。
表示されるダイアログで、左側のペインで空のプロジェクトを選択してからプロジェクトの場所を指定します。
設定ダイアログのシステム設定ページでデフォルトディレクトリを指定した場合、WebStorm はこのデフォルトの場所を提案します。プロジェクトのデフォルトの場所を変更するを参照してください。
基本的な JavaScript または TypeScript プロジェクトを作成する
WebStorm は基本的な JavaScript または TypeScript プロジェクトを作成できるため、最小限の構成でプロジェクトをセットアップできます。
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、新規プロジェクトを選択します。
右側のペインで、JavaScript または TypeScript を選択し、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
生成されたプロジェクトには、package.json と、
console.log()ウェルカムメッセージを含む index.js または index.ts ファイルが含まれます。TypeScript を選択した場合、WebStorm はコンパイラーオプションを設定するための tsconfig.json ファイルも生成します。デフォルトでは、WebStorm は Git リポジトリも作成します。
サンプル Web アプリケーションを生成するには、オンボーディングのヒントを使用して playground プロジェクトを生成するチェックボックスを選択します。WebStorm は、Vite(英語) テンプレートに基づいてプロジェクトを作成し、スムーズなオンボーディングを保証するヒントを提供します。
既存のローカルソースからプロジェクトを作成する
作業するソースがすでにマシン上にある場合は、保存先のフォルダーを開いて WebStorm プロジェクトにするだけです。
ウェルカム画面のオープンをクリックするか、メインメニューからを選択してください。
開いたダイアログで、目的のソースコードを含むディレクトリを選択します。
OK をクリックし、新しいプロジェクトを別のウィンドウで開くか、現在のプロジェクトを閉じて既存のプロジェクトを再利用するかを指定します。詳細については、「複数のプロジェクトを開く」を参照してください。
または、ソースを含むフォルダーをウェルカム画面にドラッグするだけです。
バージョン管理からプロジェクトをチェックアウトする
ウェルカム画面でリポジトリのクローンをクリックします。
あるいは、メインメニューから、、を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
フレームワーク固有のプロジェクトを生成する
WebStorm は、新しいフレームワーク固有のアプリケーションを作成し、その構造を設定し、必要に応じて必要なパッケージをダウンロードできます。Yeoman(英語) ジェネレーターも使用できます。詳細については、「Yeoman」を参照してください。
ウェルカム画面で新規プロジェクトをクリックするか、メインメニューからを選択します。新規プロジェクトダイアログが開きます。
左側のペインで、アプリケーションの種類に応じて使用するテンプレートを選択します。
右側のペインのコントロールのセットは、選択したテンプレートによって異なります。詳細については、言語およびフレームワークにあるフレームワーク固有のページの新しいアプリケーションを作成するを参照してください。
プロジェクトテンプレート
新しいプロジェクトで再現したいファイルとフォルダー、設定、構成を含むプロジェクトがあるとします。このプロジェクトをカスタムプロジェクトテンプレートとして保存してから、このテンプレートを製品の作成に使用できます。
プロジェクトをテンプレートとして保存する
に移動します。
開いたダイアログで、テンプレートの名前を指定し、必要に応じて簡単なテンプレートの説明を入力します。
WebStorm はすべてのプロジェクト設定をテンプレートの .idea フォルダーから保存します。そのため、新しいプロジェクトに定義済みの実行 / デバッグ構成をいくつか設定したい場合は、これらの構成で共用チェックボックスを選択してからテンプレートを保存してください。
テンプレートからプロジェクトを作成する
ウェルカム画面の新規プロジェクトをクリックするか、メインメニューからを選択してください。
表示されたダイアログで、左側のペインから必要なテンプレートを選択します。プロジェクトテンプレートは
でマークされています。
右側のペインで、プロジェクトの場所を指定します。
プロジェクトテンプレートを削除する
に移動します。
削除するテンプレートを選択して、
をクリックします。
関連ページ：
システム設定
WebStorm の一般的な動作を設定します。IDE を終了する前に確認 WebStorm を閉じようとしたときに確認のダイアログを表示します。実行中のプロセスウィンドウを閉じたとき実行中のプロセスをどうするかを選択します。プロセスを終了する: プロセスを完全に停止します。切断: プロセスを実行したままにしますが、プロセスから切断します。確認する: 選択するアクションのダイアログを表示します。プロジェクト：起動時に前回のプロジェクトを開く前回 WebStorm を閉じたときに開いていたすべてのプ...
WebStorm プロジェクト
WebStorm で何をするにしても、プロジェクトのコンテキストでそれを行います。WebStorm のプロジェクトは、編集するソースコード、使用するライブラリとツール（たとえば node_modules サブフォルダー）、およびさまざまなアプリ構成ファイル（たとえば package.json または .eslintrc）を含むフォルダーです。WebStorm でフォルダーを開くと、.idea サブフォルダーが追加されます。WebStorm には、プロジェクトコードスタイルやバージョン管理システムなどの内部設...
プロジェクトを開く、再開する、閉じる
プロジェクトを開くウェルカム画面のオープンをクリックするか、メインメニューからを選択してください。パスの選択ダイアログで、開くプロジェクトを含むディレクトリを選択します。新しいウィンドウでプロジェクトを開くか、現在のプロジェクトを閉じて既存のウィンドウを再利用するかを指定します。詳細については、複数のプロジェクトを開くを参照してください。コマンドラインからプロジェクトを開くコマンドプロンプトで次のように入力します。webstorm <path_to_the_project_folder&g...
GitHub でホストされているプロジェクトを管理する
プロジェクトをチェックアウトする (クローン)：WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...
ファイルとディレクトリの作成
空のファイルを作成するプロジェクトツールウィンドウでは、ファイルを作成するディレクトリを選択し、を押してから、リストからを選択します。表示される新規ファイルダイアログで、ファイル名と拡張子を入力します。新しいファイル名の前にディレクトリ構造全体を入力できます。ネストしたディレクトリがまだ存在しない場合は、作成されます。指定された拡張子が WebStorm で認識されるファイルタイプに関連付けられていない場合、コンテンツファイルタイプによって検出されたテキストファイルが作成されます。WebSto...