Sublime Text から Webstorm に移行する方法

このセクションでは、Sublime Text から WebStorm に移行する方法に関するヒントをいくつか紹介します。

最初のプロジェクトを開くか作成する

WebStorm をダウンロードしてインストールした後、最初に気づくことの 1 つは、開始するにはプロジェクトが必要であることです。プロジェクトファーストのアプローチにより、WebStorm は作業内容のコンテキストをより適切に理解し、より高度なコーディング支援を提供できるようになります。

プロジェクトを開始するには、いくつかのオプションから選択できます。

リポジトリのクローン – Git または GitHub から既存のプロジェクトを取得します。
新規プロジェクト – 空のプロジェクトを作成するか、React、Angular、Vue などの既存のテンプレートからプロジェクトを生成します。
開く – マシンに保存されているプロジェクトを開きます。

また、playground プロジェクトから始めて、いくつかの主要な機能を簡単に確認することもできます。新規プロジェクト | 新規プロジェクトに移動して、オンボーディングのヒントを使用して playground プロジェクトを生成するボックスをチェックしてください。

ショートカットの構成

これまで WebStorm やその他の JetBrains IDE を使用したことがない場合は、新しいショートカットに慣れるのは難しいかもしれません。ここでは、役立つヒントをいくつか紹介します。

Sublime Text キーマップに切り替える

まだ Sublime Text ショートカットに別れを告げる準備ができていない場合は、Sublime Text キーマップに切り替えることができます。これを行うには、設定 | キーマップに移動し、Sublime Text または Sublime Text (macOS) をデフォルトのキーマップとして設定し、変更を保存します。

WebStorm ショートカットを学ぶ

後で別の JetBrains IDE に切り替えることにした場合でも、WebStorm ショートカットの学習は役に立ちます。ショートカットはほとんどすべてで同じです。より早く学ぶのに役立つものは次のとおりです。

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 の外観は次のとおりです。このブログ投稿(英語)を読んで、他の人気のあるプラグインについて学ぶことができます。

Customize WebStorm: Rainbow Brackets plugin installed

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 で慣れていたものと一致するようにデフォルト設定を変更する方法は次のとおりです。

Project view: customize default settings

プロジェクトビュー設定に移動し、振る舞いにある次のオプションのいずれかまたはすべてを選択できます。

プレビュータブの有効化 –プロジェクトツールウィンドウで選択したファイルをエディターでプレビューします。
シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。
開いているファイルを常に選択 –プロジェクトツールウィンドウで現在開いているファイルを自動選択します。

コード編集アクション

WebStorm は、選択範囲の拡張、複数のカーソル、コメントの追加など、Sublime Text で慣れ親しんだコード編集アクションの多くをサポートしています。それらのいくつかは、メインメニューの編集にあります。また、ヒントとコツのコレクションを調べることもできます。

保存時のアクション

変更したファイルを保存するたびに、WebStorm が特定のアクションを実行したり、Prettier や ESLint などのツールを実行したりするように設定できます。これを行うには、設定 | ツール | 保存時のアクションに移動し、必要なボックスにチェックを入れます。保存時にアクションを実行する方法の詳細については、このセクションを参照してください。

Customize WebStorm: set up actions on save

サポートを受ける方法

コミュニティフォーラムをチェックして、多くの一般的な質問への回答を見つけたり、他の WebStorm ユーザーに助けを求めたりすることができます。

バグを報告したり、新しい機能をリクエストしたりするには、ここで新しい問題を作成してください。

2025 年 5 月 02 日

WebStorm 2025.3 ヘルプ