WebStorm 入門

プロジェクトを開く、チェックアウトする、またはプロジェクトを作成する

WebStorm のプロジェクトは、編集するソースコード、使用するライブラリとツール（ node_modules サブフォルダー内など）、およびさまざまなアプリ構成ファイル（package.json や .eslintrc など）を含むフォルダーです。

WebStorm でフォルダーを開くと、.idea サブフォルダーが追加されます。WebStorm には、プロジェクトコードスタイルやバージョン管理システムなどの内部設定が保存されます。

WebStorm Welcome 画面からプロジェクトを開き、チェックアウトし、作成できます。

WebStorm のユーザーインターフェースを理解する

WebStorm ウィンドウは、コードの読み取り、作成、変更を行うエディター、メニューとツールバー、ナビゲーションバー、ステータスバー、および多数の WebStorm ツールウィンドウで構成されています。これらのセカンダリウィンドウは、ワークスペースの下部と側面に接続されており、コードのデバッグ、テストの実行、バージョン管理システムとの対話などを行うことができます。

ユーザーインターフェースの概要、エディターの基本、ツールウィンドウの詳細を参照してください。

WebStorm のレイアウトは自由に整理できます。例：自分のコードを書くことに集中したいなら、集中モードを試してください。すべてのツールバー、ツールウィンドウ、エディタータブが削除されるため、空き容量が増えます。このモードに切り替えるには、メインメニューから表示 | 外観 | 集中モードにするを選択します。

集中モードの代替案は、Ctrl+Shift+F12 を押してすべてのツールウィンドウを隠すことです。このショートカットをもう一度押すと、レイアウトをデフォルトに戻すことができます。

ツールウィンドウが非表示になっているときは、ショートカットを使用してそれらのウィンドウにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキスト内で任意のキーボードコマンドを使用できます。エディターに戻るには、Escape を押すだけです。ツールウィンドウが表示されているときにショートカットを押すと、そのウィンドウにフォーカスが移動するだけです。

以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです：

ナビゲーションバーは、プロジェクトツールウィンドウのコンパクトな代替品です。ナビゲーションバーにアクセスするには、Alt+Home を押します。

Right , Right , Up キーと Down キーを使用して、フォルダー間を移動してその内容を表示します。

ほとんどのツールウィンドウとポップアップで、WebStorm はスピード検索をサポートしています。スピード検索を使用すると、検索クエリを使用してリストをフィルターしたり、特定のアイテムに移動したりできます。

探索の方法

WebStorm には、どのようなコードが複雑になっていても、コードを検索するのに役立つ検索機能とナビゲーション機能が付属しています。詳細はソースコードナビゲーションを参照してください。

プロジェクトシンボルの使用箇所を見つける

プロジェクトで特定のシンボルが使用されている場所を見つけるために、WebStorm は使用箇所の検索 Alt+F7 を介したフルスケール検索を提案しています。

タイムラインをナビゲートする

WebStorm は、ローカルヒストリーでソースコードに加えた変更、リファクタリングの結果などを自動的に追跡します。ファイルまたはフォルダーを表示するには、メインメニューから VCS | ローカルヒストリー | ヒストリーの表示を選択します。ここで、変更を確認したり、を元に戻したり、パッチを作成したりできます。

ローカルヒストリーの詳細を参照してください。

コードを完成させる

WebStorm は、標準言語 API およびプロジェクトの依存関係からのキーワード、シンボルを自動的に補完します。 Ctrl+Space を押して、現在のコンテキストのコード補完オプションを取得します。提案された各メンバーの横のアイコンは、そのタイプを示します。

より多くのバリアントを表示するには、もう一度 Ctrl+Space を押します。

コード補完の詳細を参照してください。

コードをオンザフライでインスペクションして修正する

WebStorm はあなたのコードを監視し、正確かつきれいに保ちます。潜在的なエラーと問題を検出し、その問題の迅速な修正を提案します。WebStorm は、未使用のコード、無限ループ、シンボルのインポートステートメントの欠落、およびおそらく注意が必要なその他多くのものを見つけるたびに、ハイライトと電球を表示します。この電球をクリックするか、Alt+Enter を押して修正を適用します。

import ステートメントを忘れましたか？ WebStorm は、シンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。

または、Alt+Enter を押して「インポート " お客様 "」を挿入をクリックします。

ES6 および TypeScript シンボルの場合、WebStorm はコード補完に欠落しているインポートステートメントを追加できます。

使用可能なインスペクションの完全なリストを表示するには、設定ダイアログ Ctrl+Alt+S で、エディターのインスペクションをクリックします。それらのいくつかを無効にしたり、他のものを有効にしたり、各インスペクションの重大度を調整したりできます。エラーと見なすか警告と見なすかを決定します。

コードインスペクションと問題の解決の詳細を参照してください。

コードをリファクタリングする

リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dry(英語) を維持しやすくします。WebStorm は、リファクタリング後にコードが以前と同じように機能するようにします。変更はプロジェクト全体にスマートに行われるためです。例：クラスの名前を変更すると、WebStorm はすべての使用箇所とインポート文の名前を自動的に変更します。

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

アプリケーションの実行とデバッグ

WebStorm では、アプリケーションの実行またはデバッグの開始点は実行 / デバッグ構成です。WebStorm には、さまざまな種類のアプリケーションとファイル用に事前定義された実行 / デバッグ構成テンプレートが多数用意されています。設定で提供する必要のある情報は、そのタイプによって異なります。実行するファイルまたはテストにすることができます。いくつかの設定はすでに実行中のアプリケーションにアタッチすることができます。この場合、アタッチする URL とポートを指定する必要があります。

コードスタイルの標準に従う

WebStorm は、各言語に固有のコードスタイル設定に従って、すべての新しいコードを自動的にフォーマットします。これらの設定は、リファクタリング中にも適用されます。

自分でコードスタイルを設定することも、TSLint(英語) または ESLint(英語) 設定ファイルからコードスタイルルールを適用することもできます。WebStorm での TSLint のアクティブ化と構成と ESLint からコードスタイルをインポートするからさらに学びましょう。

プロジェクトコードスタイルの設定に従ってコードを再フォーマットするには、コードフラグメントまたはファイル全体を選択し、Ctrl+Alt+L を押します。

ソースコードをバージョン管理下に置く

ソースコードをバージョン管理下に置いている場合、WebStorm が Git（または GitHub）、Mercurial、Perforce、Subversion、CVS などの多くの一般的なバージョン管理システムと統合されることを知ってうれしいでしょう。ほとんどの場合、WebStorm は VCS を自動的に検出します。資格情報と設定を指定するには、設定ダイアログ Ctrl+Alt+S のバージョン管理ページに移動します。

VCS メニューは、使用可能なコマンドに関する手がかりを提供します。バージョン管理ツールウィンドウ Alt+9 では、あなたのチームメイトが行った変更の表示と追跡、変更リストの作成、変更のコミットとプッシュなどを行うことができます。

コミット、プッシュ、履歴の表示などの最も使用される操作は、VCS 操作ポップアップ Alt+` からも利用できます。

詳細については、バージョン管理を参照してください。

環境をカスタマイズする

WebStorm を自由に調整して、ニーズに完全に適合し、できるだけ便利で快適になるようにしてください。