WebStorm の機能

関連性の高いキーワードとシンボルが入力中に提案されるため、より迅速にコーディングできます。すべての提案はコンテキストおよび型の認識によって提供され、複数の異なる言語で機能します。たとえば、.js ファイル内の CSS のクラス名は機械学習のサポートによって補完されます。

後置補完、ライブテンプレート、および Emmet を使って生産性を高めることもできます。

WebStorm では、コード内のエラーとタイポを簡単に検出できます。すべてのサポート対象言語に対応した多数のインスペクションが搭載されており、組み込みのスペルおよび文法チェッカーも備わっています。また、Stylelint や ESLint と統合することで、さらに柔軟性を高めることができます。 WebStorm はユーザーがコードを入力中にこれらのリンターを実行し、検出された問題をエディター内に直接ハイライト表示します。

すべてのエラーと警告が入力中のエディター内に報告され、多数のクイックフィックスオプションを使用できます。

WebStorm が最も得意としているのは、コードベース全体で行うコードの安全なリファクタリングです。潜在的な問題は WebStorm が通知してくれるため、コードの機能が壊れる心配なく、ファイル、フォルダー、およびシンボルの名前の変更や、コンポーネント、メソッド、または変数の抽出を実行できます。

シンボルのドキュメントを検索する必要がありますか？そんな時でも IDE から離れる必要はありません！対象のシンボルにマウスカーソルを合わせるかキャレットを置いて Ctrl+Q を押すだけで、関連するすべての情報を表示できます。また、WebStorm がメソッドや関数の呼び出しでパラメーターヒントを表示できるようになりました。

WebStorm から静的な HTML ファイルを直接プレビューすることができます。 HTML ファイルやリンク先の CSS / JavaScript ファイルに対する変更が保存されると、プレビューが自動的に再ロードされて変更が反映されます。

WebStorm は生産性を考慮して作成されているため、コーディング速度を向上させる支援機能がまだまだたくさんあります。複数キャレット、行編集アクション、重複コードの検出などはユーザーが使用できる時短機能のほんの一部に過ぎません。

何から始めるべきかわかりませんか？ Search Everywhere ポップアップ（Shift+Shift）を使えば、WebStorm 内のほぼあらゆる項目を検索できます。これを使って IDE のアクション、ファイル、クラス、シンボル、またはテキスト文字列を検索すると、一致するすべての項目を一か所で確認できます。

WebStorm ではシンボル宣言に素早く移動し、プロジェクト全体でシンボルの使用箇所を確認することができます。変数、フィールド、メソッド、またはその他のシンボルにキャレットを置いて Ctrl+B を押すだけです。

すべてのプロジェクトファイルを参照することも、最近のファイルやコードの変更箇所のみを確認することもできます。WebStorm はユーザーの作業内容を記憶しますので、中断した場所にすぐに戻れます。タブを使ってナビゲーションするか、ナビゲーションはオフにしてショートカットを使用することもできます。

テキスト文字列専用の検索を使用できます。この検索を使用すると、特定のファイル内やプロジェクト全体でテキスト文字列を検索して置換できます。プロジェクトのスコープやフィルターを使用することで、検索対象をファイル内の選択したコード箇所に絞り込むことができます。

Git との複雑な連携操作中に、何かが壊れてしまうことを心配していませんか？日常業務のワークフローを支援する WebStorm の UI でブランチの比較、差分の表示、マージ競合の解決などを実行できます。 GitHub でホストされたプロジェクトを IDE から直接管理することも可能です。

バージョン管理に変更をコミットし忘れたり、多数のファイルを誤って削除してしまったりしたら？このような問題を解決するため、WebStorm にはローカル履歴が組み込まれています。この機能はプロジェクトファイルに適用されたすべての変更を追跡するため、バージョン管理を使用していないプロジェクトでも変更のロールバックが可能になります。

クライアントサイドアプリケーションと Node.js アプリケーションをコードの編集箇所で直接実行してデバッグできます。ブレークポイントの追加、プログラムのステップ実行、ウォッチの設定など、すべてのデバッグ機能を種類の異なるアプリケーションで同じように使用することができます。

Jest、Macha、Protractor、および Vitest を使ってユニットテストを記述、実行、およびデバッグできます。テスト結果をツリービューで確認し、そこからテストソースに移動できます。 Jest、Vitest、および Mocha については、WebStorm からコードカバレッジレポートを直接確認することもできます。

Prettier を使用し、選択されたコード箇所だけでなく、ファイルやディレクトリ全体に対して整形を実行できます。 Prettier を保存時に自動的に実行するように WebStorm を構成することも、デフォルトのフォーマッターとして設定することもできます。

Docker コンテナー内のアプリケーションの実行とデバッグ、イメージのダウンロードとビルド、Docker Compose を使用したマルチコンテナーアプリケーションの実行、その他の操作を IDE から行うことができます。

特定のタスクでコマンドラインを使用したいですか？ WebStorm 組み込みのンターミナルを使用すると、IDE を離れることなくコマンドラインシェルを操作できます。ターミナルはファイルへの移動に対応しており、オペレーティングシステムと同じコマンドをすべてサポートしています。

WebStorm と統合された HTTP クライアントを使ってウェブサービスをテストできます。エディター内で直接 HTTP リクエストを作成、編集、および実行し、そのリクエストをチーム全体で共有できます。

WebStorm は npm、Yarn、および pnpm と統合できるため、IDE 内からお好みのパッケージマネージャーを使用してパッケージのインストール、検索、更新、および削除を行えます。

データベースツールと SQL の完全サポートは WebStorm に無料でバンドルされています。 IDE でデータベースを直接クエリ、作成、および管理できます。詳細については、こちらのブログ記事をご覧ください。

プロジェクトについて AI に質問したり、タスクの反復処理を AI に要求したりできます。IDE を離れる必要はなく、コード箇所をコピーして貼り付ける必要もありません。

AI Assistant がコードとドキュメントの両方を解析し、コード用のテストを生成します。宣言のドキュメントを作成することも可能です。

AI Assistant は自然言語でコミット間の diff の内容を要約して説明し、変更を説明するコミットメッセージを生成することができます。

プロジェクトで使用されている言語とテクノロジーだけでなく、ローカルの変更やバージョン管理システムのコミットを考慮するカスタム AI プロンプトを使用できます。

リモート開発機能で生産性を高めましょう。応答性の高い IDE を提供するローカルの軽量クライアントを使用して任意のマシンとリモートサーバーで作業できるため、あらゆる高負荷の処理に対応できます。

WebStorm に含まれている事前定義のテーマは数個しかありませんが、選択できるカスタムオプションは多種用意されています。多くの UI 要素では表示オプションの切り替えや位置の変更も可能で、コードに集中しやすい Zen モードに切り替えることもできます。

生産性を維持できるよう、WebStorm にはほぼすべてのアクションに対してショートカットが用意されています。定義済みのキーボードレイアウトを使用するか、独自のレイアウトを作成することができます。使用できるキーマップには、VS Code や Sublime Text などがあります。

IDE の基本機能を拡張し、既存の機能にカスタマイズオプションを追加できます。 JetBrains Marketplace にアクセスすると、入手可能なすべての WebStorm プラグインを確認できます。

IdeaVim プラグインで IDE に Vim と同等の機能を追加できます。たとえば、通常 / 挿入 / ビジュアルモード、移動キー、削除と変更、マークなどの機能があります。ブログにアクセスして使い始めましょう。

WebStorm にはアクセシビリティ要件を満たすように設計された機能が実装されています。ツールウィンドウのサイズやエディター内のテキストサイズの調整、色のカスタマイズ、ショートカットのパーソナライズなどを柔軟に行えます。これらの機能に加えて、スクリーンリーダーがサポートされています。

複数の JetBrains IDE 間で設定を共有し、常に使い慣れた作業環境に統一できます。 UI、コード、およびシステムの設定、キーマップ、プラグイン、ツールなど、同期する設定を選択できます。