Sublime Text から Webstorm に移行する方法
このセクションでは、Sublime Text から WebStorm に移行する方法に関するヒントをいくつか紹介します。
最初のプロジェクトを開くか作成する
WebStorm をダウンロードしてインストールした後、最初に気づくことの 1 つは、開始するにはプロジェクトが必要であることです。 プロジェクトファーストのアプローチにより、WebStorm は作業内容のコンテキストをより適切に理解し、より高度なコーディング支援を提供できるようになります。
プロジェクトを開始するには、いくつかのオプションから選択できます。
リポジトリのクローン – Git または GitHub から既存のプロジェクトを取得します。
新規プロジェクト – 空のプロジェクトを作成するか、React、Angular、Vue などの既存のテンプレートからプロジェクトを生成します。
開く – マシンに保存されているプロジェクトを開きます。
主な機能をすばやく見たい場合は、プレイグラウンドプロジェクトから始めることもできます。 新規プロジェクト | 新規プロジェクト に進み、 オンボーディングのヒント付き playground プロジェクトを生成する ボックスにチェックを入れてください。
ショートカットを構成する
これまで WebStorm やその他の JetBrains IDE を使用したことがない場合は、新しいショートカットに慣れるのは難しいかもしれません。 ここでは、役立つヒントをいくつか紹介します。
Sublime Text キーマップに切り替える
まだ Sublime Text ショートカットに別れを告げる準備ができていない場合は、Sublime Text キーマップに切り替えることができます。 これを行うには、 設定 | キーマップ に移動し、 Sublime Text または Sublime Text (macOS) をデフォルトのキーマップとして設定し、変更を保存します。
WebStorm ショートカットを学ぶ
WebStorm のショートカットを覚えておくと、後で別の JetBrains IDE に切り替えても便利です。ほとんどの IDE でショートカットは共通です。 次のことが、ショートカットをより早く覚えるのに役立ちます：
WebStorm の最も普遍的なショートカットを覚える – Shift + Shift 、または どこでも検索。 これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。
Key Promoter X をインストールする – この拡張機能(英語)は、作業中に重要なショートカットを学習できます。 IDE 内のボタンでマウスを使用すると、Key Promoter X は代わりに使用できたショートカットを表示します。
WebStorm ショートカットのチートシートを使用する – macOS(英語) または Windows と Linux(英語) のデフォルトの WebStorm キーマップリファレンスをダウンロードできます。
WebStorm は、環境に基づいて定義済みのキーマップを提案します。 このキーマップは 設定 | キーマップ にあります。 アクションのショートカットを変更すると、WebStorm はそれらの変更を定義済みのキーマップのコピーに保存し、デフォルトでそのコピーを使用します。
作業環境をセットアップする
IDE である WebStorm には、多くの強力な機能が組み込まれているため、すぐにコーディングを開始し、より複雑なタスクを簡単に処理できます。 ほとんどの場合、デバッグ、テスト、バージョン管理システムの操作などの機能を含め、 すべてが WebStorm ですぐに使用できます。
すぐに使い始める方法については、 これらのビデオ(英語)を参照してください。 WebStorm が提供する機能の概要については、 このページを参照してください。
WebStorm をカスタマイズ
WebStorm の UI は、最初は圧倒的に見えるかもしれません。 カスタマイズして、不要なものをオフにすることができます。 ここでは、一般的なカスタマイズのヒントをいくつか紹介します。
プラグイン
WebStorm のプラグインは、Sublime Text のパッケージとほぼ同じように機能します。 これにより、組み込み機能を拡張し、IDE をカスタマイズできます。 利用可能なプラグインを調べるには、 設定 | プラグイン の マーケットプレース タブに移動してください。 次に、名前の横にある インストール ボタンをクリックしてプラグインをインストールできます。
人気の レインボー括弧 プラグインをインストールした場合の WebStorm の外観は次のとおりです。 このブログ投稿(英語)を読んで、他の人気のあるプラグインについて学ぶことができます。
UI テーマ
WebStorm には定義済みのテーマがいくつか付属していますが、さまざまなカスタムオプションから選択できます。 調べるには、 設定 | プラグイン に移動し、 マーケットプレース タブで「テーマ」を検索してください。
その後、エディターに戻って、インストールしたテーマの外観を確認できます。 メインメニューから 表示 | クイックスイッチスキーム を選択するか、 Ctrl+` を押して テーマ を選択します。 そこから、利用可能なテーマをすべて一度にプレビューできます。
集中モード
コーディングに集中したいときはいつでも、集中モードに切り替えることができます。 メインメニューで、 表示 | 外観 に移動し、 禅モードにする または 集中モードの開始 を選択します。 前者は、Sublime Text の 気が散らない モードと同じように動作します。 後者は、全画面表示をオンにしません。
同じ手順を実行しますが、完了したら 禅モードを終了 または 集中モードの終了 を選択します。
AI 機能
WebStorm のワークフローを AI 機能で強化したい場合は、IDE にネイティブ統合されている JetBrains AI を利用できます。 JetBrains AI には、インテリジェントなコーディング支援ツールである AI Assistant と、コーディングタスクを独立して実行できる AI コーディングエージェントである Junie の両方が含まれています。
AI Assistant は、IDE に直接統合できるインテリジェントな機能により、開発ワークフローを強化します。 主な機能は以下のとおりです。
コード補完 – コードの単一行やブロック全体を自動補完し、コーディングスタイルや命名規則の順守を担保します。
次の編集提案 – コードの次の編集候補を提案します。 提案をすばやく適用し、変更が必要な可能性のある次の箇所に移動して、ファイル全体の関連コードを更新します。
エージェントモードによる AI チャット – サポートされている言語モデルのいずれかとチャットしたり、プロジェクトに関する質問をしたり、タスクを反復処理したりできます。 エージェントモードに切り替えて、修正の実装、コードのリファクタリング、テストの生成など、より複雑なアクティビティを実行できます。
コンテキスト管理 – ファイル、フォルダー、画像、シンボル、コミット、他の項目を追加して、質問に関連する追加のコンテキストを AI Assistant に提供できます。
応答処理 – AI が提案する変更を確認して適用します。 単一または複数のファイルを変更したり、コードスニペットを適用したり、AI チャットから直接ターミナルコマンドを実行したりできます。
クラウドベースの LLM サポート – AI チャットで動作させるには、お好みの AI モデルを選択してください。 Google Gemini、OpenAI、Anthropic などのクラウドプロバイダーからお選びいただけます。
ローカルモデルの使用 – サードパーティが提供するカスタムローカルモデルを設定し、コード補完、エディター内コード生成、コミットメッセージ生成などの AI Assistant 機能に使用できます。
そして、 その他にもたくさんあります。
Junie は、単独でタスクを実行することも、開発者と連携して作業することもできます。 定型的なタスクは Junie に完全に委譲でき、より複雑な作業にも対応できます：
プロジェクトのコンテキストと構造を使用してタスクを実行します。
コードを分析および検索して関連情報を検索します。
IDE インスペクションを使用してコードを編集し、チェックします。
コードとテストを実行して警告とエラーを減らします。
変更後のプロジェクトの状態とテスト結果を確認します。
変更のレビューとガイダンスにより、複雑なタスクでのコラボレーションをサポートします。
その他 多数。
AI 機能は、無料プランを含む新しいサブスクリプションモデルでご利用いただけます。 無料プランでは、コード補完が無制限に利用可能で、ローカルモデルへのアクセスとクラウドベースの機能が制限されています。 さらに機能を追加するには、AI Pro または AI Ultimate プランにアップグレードしてください。
AI Assistant を有効にする
有効な JetBrains アカウント(英語)を使用してログインしていることを確認してください。
AI Assistant ヘルプの説明に従ってライセンスをアクティブ化してください。
また、WebStorm では GitHub Copilot、Tabnine、その他の AI ツールも利用できます。対応するプラグインは マーケットプレース タブで、 設定 | プラグイン から検索してください。 これらのプラグインは JetBrains ではメンテナンスされていませんのでご注意ください。
一般的な Sublime Text ワークフローを複製する
Sublime Text のように動作するようにいくつかの設定を行う方法を見てみましょう。
コマンドパレット
どこでも検索 は、Sublime Text の コマンドパレット とその他のいくつかのアクションの代わりです。 これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。 どこでも検索 を開くには、 Shift + Shift を押すか、デフォルトの コマンドパレット ショートカットを使用します (Sublime Text キーマップを使用している場合)。
検索と置換
WebStorm を使用すると、特定のファイル内とプロジェクト全体の両方でテキスト文字列を検索して置換できます。 開始するには、メインメニューで 編集｜検索 に移動し、 検索 (特定のファイルの場合) または ファイル内検索 (プロジェクト全体の場合) を選択します。 テキスト文字列を置換するには、代わりに同じサブメニューで 置換 または ファイル内置換 を選択します。
プロジェクトビュー設定
WebStorm には プロジェクト ビューがあり、現在のプロジェクトの構造を確認して参照できます。 デフォルトの動作は、Sublime Text の動作とは異なります。 たとえば、ファイルをダブルクリックしてエディターで開く必要があります。 Sublime Text で慣れていたものと一致するようにデフォルト設定を変更する方法は次のとおりです。
プロジェクト ビュー設定に移動し、 振る舞い にある次のオプションのいずれかまたはすべてを選択できます。
プレビュータブの有効化 – プロジェクト ツールウィンドウで選択したファイルをエディターでプレビューします。
シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。
開いているファイルを常に選択 – プロジェクト ツールウィンドウで現在開いているファイルを自動選択します。
コード編集アクション
WebStorm は、選択範囲の拡張、複数のカーソル、コメントの追加など、Sublime Text で慣れ親しんだコード編集アクションの多くをサポートしています。 それらのいくつかは、メインメニューの 編集 にあります。 また、 ヒントとコツのコレクションを調べることもできます。
保存時のアクション
変更したファイルを保存するたびに、WebStorm が特定のアクションを実行したり、Prettier や ESLint などのツールを実行したりするように設定できます。 これを行うには、 設定 | ツール | 保存時のアクション に移動し、必要なボックスにチェックを入れます。 保存時にアクションを実行する方法の詳細については、 このセクションを参照してください。
サポートを受ける方法
コミュニティフォーラムをチェックして、多くの一般的な質問への回答を見つけたり、他の WebStorm ユーザーに助けを求めたりすることができます。
バグを報告したり、新機能をリクエストしたりするには、 こちら(英語)で新しい問題を作成してください。