変更の保存と復元
WebStorm は、ファイルに加えた変更を自動的に保存します。保存は、実行、デバッグ、バージョン管理操作の実行、ファイルまたはプロジェクトのクローズ、IDE の終了などのさまざまなイベントによってトリガーされます。ファイルの保存は、サードパーティのプラグインによってトリガーすることもできます。
自動保存をトリガーするイベントのほとんどは事前定義されており、構成することはできませんが、変更が失われることはなく、ローカル履歴ですべてを見つけることができます。
自動保存動作を設定する
設定ダイアログ（Ctrl+Alt+S）で、を選択します。
外部の変更を同期するで、次のオプションを設定します。
別のアプリケーションや組み込みのターミナルに切り替える際にファイルを保存する : WebStorm から別のアプリケーションに切り替えるときに、変更されたすべてのファイルを保存します。
IDE が N 秒間アイドル状態の場合にファイルを保存する : 変更されたすべてのファイルを定期的に保存します。
変更を適用し、ダイアログを閉じます。
未保存の変更があるファイルにマークを付ける
ファイルタブで未保存のファイルをマークできます。
設定ダイアログ（Ctrl+Alt+S）で、を選択します。
変更があればマークするチェックボックスを選択します。
変更を適用し、ダイアログを閉じます。
その後、変更が保存されていないファイルのタブに青い点が付きます。
バージョン管理統合を使用する場合、変更されたすべてのファイルの名前も、ファイルタブとプロジェクトツールウィンドウで専用の色でマークされます。
変更を手動で保存する
変更はいつでも手動で保存できます。
Ctrl+S を押すか、メインメニューからを選択します。
変更を保存するときにアクションをトリガーする
WebStorm では、変更したファイルが保存されるたびにトリガーされるアクションを構成できます。
現在のプロジェクトの自動保存アクションを構成するには、設定ダイアログ (Ctrl+Alt+S) でを開きます。
新しいプロジェクトのアクションを設定するには、メインメニューのに移動します。
保存時にトリガーするアクションの横にあるチェックボックスを選択します。
コードの整形 : 現在のコードスタイル設定に従ってコードを再フォーマットします。
インポートの最適化 : 未使用のインポートを削除し、現在のコードスタイル設定に従ってインポートステートメントを整理します。
コードの再配置 : 現在のコードスタイル設定に従ってコード要素を並べ替えます。
コードクリーンアップの実行 : コードクリーンアップインスペクションからのクイックフィックスをバッチ適用します。プロジェクトプロファイルドロップダウンリストを使用して、IDE がインスペクションを実行するインスペクションプロファイルを選択します。
コピーライト表示の更新 : プロジェクトファイルのコピーライト表示の情報を更新します。
stylelint --fix を実行する : Stylelint で検出された問題を修正しました。
eslint --fix を実行する : ESlint で検出された問題を修正します。
このオプションを有効にすると、保存時に eslint --fix を実行も有効になります。
File Watcher : 設定した File Watchers を実行します。
Prettier の実行 : コードを Prettier で再フォーマットします。
デフォルトサーバーへアップロード : 変更したファイルをデフォルトのデプロイサーバーにアップロードします。
このオプションを有効にすると、変更されたファイルのデフォルトサーバーへの自動アップロードも有効になります。
一部のアクションでは、より正確に設定を構成できます。これを行うには、アクションの上にマウスを置き、構成リンクをクリックします。
例: コードを再フォーマットする場合、変更したくないファイルとフォルダーを指定できます。アクションの上にマウスを移動し、スコープの構成をクリックして、特定のファイルとフォルダーを再フォーマットから除外します。
ファイル全体を再フォーマットするか、変更した行のみを再フォーマットするかを選択することもできます。
変更を適用し、ダイアログを閉じます。
必要なアクションが有効になると、プロジェクトでの作業中に、保存のたびに自動的にトリガーされます（自動保存、Ctrl+S で、を選択して明示的な保存が呼び出されます）。
リセット
リファクタリングを含む最新の変更については、Ctrl+Z を押すか、メニューからを選択します。
過去の変更の詳細を表示するには、ローカル履歴を使用します。
すべての変更を最も確実に追跡するには、バージョン管理システムを使用します。
関連ページ：
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
ローカル履歴
ローカル履歴は、バージョン管理とは関係なく、プロジェクトに加えられたすべての変更を常に追跡できます。コミット間で行われた違いのみを追跡するバージョン管理システムとは異なり、ローカル履歴にはさらに多くの機能があります。コードの編集、テストの実行、アプリケーションのデプロイなどを行うと、プロジェクトの状態が自動的に記録され、IDE と外部の両方から行われたすべての意味のある変更のリビジョンが維持されます。ローカル履歴を使用すると、個人のバージョン管理システムとして機能し、プロジェクトでバージョン管理...
バージョン管理
Web 開発環境 WebStorm の使い方や高等テクニック満載の JetBrains 日本語公式ヘルプ。最新の英語版ヘルプ内容が随時反映されます。
コードの再フォーマットと再配置
WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。また、コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択しま...
自動インポート
JavaScript および TypeScript ファイルでは、WebStorm は、モジュール、クラス、コンポーネント、エクスポート可能なその他のシンボルや XML ネームスペースのインポートステートメントを自動的に追加します。JavaScript で自動インポート、TypeScript での自動インポート、XML 名前空間のインポートの詳細を参照してください。ES6 シンボルまたは CommonJS モジュールを完了すると、WebStorm はインポートステートメント自体のスタイルを決定す...
結果の取得と問題の解決
インスペクションがあなたのコードに問題を検出した場合、すぐにエディターで修正を適用することができます。ハイライトされたコード部分にキャレットを置き、を押します。WebStorm では、一部のインスペクション (条件として使用されている代入、'switch' ステートメントの到達不能な 'case' 分岐、条件として使用されている代入など) のクイックフィックスの横に対話型プレビューが表示されます。を押すと、このプレビューを非表示にしたり表示したりできます。現在のファイルで発生するすべての問題...