WebStorm 2024.2 ヘルプ

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

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

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

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

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

  • リポジトリのクローン – Git または GitHub から既存のプロジェクトを取得します。

  • 新規プロジェクト – 空のプロジェクトを作成するか、React、Angular、Vue などの既存のテンプレートからプロジェクトを生成します。

  • 開く – マシンに保存されているプロジェクトを開きます。

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

Welcome screen

ショートカットの構成

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

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

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

Set the Sublime Text keymap as default

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 には定義済みのテーマがいくつか付属していますが、さまざまなカスタムオプションから選択できます。調べるには、設定 | プラグインに移動し、マーケットプレースタブで「テーマ」を検索してください。

Customize WebStorm: select UI theme

その後、エディターに戻って、インストールしたテーマの外観を確認できます。メインメニューから表示 | スキームのクイック切り替えを選択するか、Ctrl+` を押してテーマを選択します。そこから、利用可能なテーマをすべて一度にプレビューできます。

集中モード

コーディングに集中したいときはいつでも、集中モードに切り替えることができます。メインメニューで、表示 | 外観に移動し、禅モードにするまたは集中モードの開始を選択します。前者は、Sublime Text の気が散らないモードと同じように動作します。後者は、全画面表示をオンにしません。

Customize WebStorm: Zen mode

同じ手順を実行しますが、完了したら禅モードを終了または集中モードの終了を選択します。

AI 機能

WebStorm とネイティブに統合された AI コーディングアシスタントをお探しの場合は、JetBrains AI Assistant(英語) をお試しください。コンテキスト認識型スマートチャットや、コード生成、ドキュメント作成などの多くの機能が含まれています。7 日間の無料トライアルをご利用いただけます。

WebStorm では、GitHub Copilot、Supermaven、Tabnine、その他の AI ツールも使用できます。設定 | プラグインマーケットプレースタブで対応するプラグインを検索してください。これらのプラグインは JetBrains によって管理されていないことに注意してください。

一般的な Sublime Text ワークフローを複製する

Sublime Text のように動作するようにいくつかの設定を行う方法を見てみましょう。

コマンドパレット

どこでも検索は、Sublime Text のコマンドパレットとその他のいくつかのアクションの代わりです。これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。どこでも検索を開くには、Shift + Shift を押すか、デフォルトのコマンドパレットショートカットを使用します (Sublime Text キーマップを使用している場合)。

Customize WebStorm: Command Palette

検索と置換

WebStorm を使用すると、特定のファイル内とプロジェクト全体の両方でテキスト文字列を検索して置換できます。開始するには、メインメニューで編集 | 検索に移動し、検索 (特定のファイルの場合) または複数ファイル内検索 (プロジェクト全体の場合) を選択します。テキスト文字列を置換するには、代わりに同じサブメニューで置換または複数ファイル内置換を選択します。

Customize WebStorm: search and replace

プロジェクトビュー設定

WebStorm にはプロジェクトビューがあり、現在のプロジェクトの構造を確認して参照できます。デフォルトの動作は、Sublime Text の動作とは異なります。たとえば、ファイルをダブルクリックしてエディターで開く必要があります。Sublime Text で慣れていたものと一致するようにデフォルト設定を変更する方法は次のとおりです。

Project view: customize default settings

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

  • プレビュータブの有効化プロジェクトツールウィンドウで選択したファイルをエディターでプレビューします。

  • シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。

  • 開いているファイルを常に選択プロジェクトツールウィンドウで現在開いているファイルを自動選択します。

コード編集アクション

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

保存時のアクション

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

Customize WebStorm: set up actions on save

サポートを受ける方法

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

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

関連ページ:

変更の保存と復元

WebStorm は、ファイルに加えた変更を自動的に保存します。保存は、実行、デバッグ、バージョン管理操作の実行、ファイルまたはプロジェクトのクローズ、IDE の終了などのさまざまなイベントによってトリガーされます。ファイルの保存は、サードパーティのプラグインによってトリガーすることもできます。自動保存をトリガーするイベントのほとんどは事前定義されており、構成することはできませんが、変更が失われることはなく、ローカル履歴ですべてを見つけることができます。自動保存動作を設定する設定ダイアログで、を...

VS Code から WebStorm への移行方法

このセクションでは、VS Code から WebStorm に移行する方法に関するヒントをいくつか紹介します。最初のプロジェクトを開くか作成する:WebStorm をダウンロードしてインストールした後、最初に気づくことの 1 つは、開始するにはプロジェクトが必要であることです。プロジェクトファーストのアプローチにより、WebStorm は作業内容のコンテキストをより適切に理解し、より高度なコーディング支援を提供できるようになります。プロジェクトを開始するには、いくつかのオプションから選択できま...

WebStorm のパフォーマンスを向上させる方法

このセクションでは、WebStorm の実行を高速化するためのヒントをいくつか紹介します。大規模なプロジェクトに取り組んでいる場合に特に役立ちます。これらのヒントを試しても WebStorm がまだ遅い場合は、以下の説明に従ってパフォーマンスの問題を報告してください。メモリヒープを増やす:大規模なプロジェクトに取り組んでいる場合、IDE の動作が遅くなることがあります。これを修正するために最初に試みることができることの 1 つは、WebStorm のメモリヒープサイズを増やすことです。IDE...