WebStorm 2024.3 ヘルプ

VS Code から WebStorm への移行方法

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

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

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

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

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

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

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

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

Welcome screen

ショートカットの構成

これまで WebStorm または他の JetBrains IDE を使用したことがない場合、新しいショートカットに慣れるのは難しい場合があります。これを支援するためのヒントをいくつか紹介します。

VS Code キーマップに切り替える

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

Set the VS Code 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 はそれらの変更を事前定義されたキーマップのコピーに保存し、デフォルトでそのコピーを使用して先に進みます。

作業環境をセットアップする

WebStorm と VS Code の主な違いの 1 つは、多くの拡張機能をインストールして設定する必要がないを使用すると WebStorm が強力になることです。ほとんどの場合、すべてがそのまま使用できるため、すぐにコーディングを開始できます。

すぐに使い始める方法については、これらのビデオ(英語)を参照してください。WebStorm が提供する機能の概要については、このページを参照してください。

WebStorm をカスタマイズ

WebStorm の UI は、最初は圧倒的に見えるかもしれません。カスタマイズして、不要なものをオフにすることができます。ここでは、一般的なカスタマイズのヒントをいくつか紹介します。

拡張

JetBrains IDE では、拡張機能をプラグインと呼びます。これらは VS Code の拡張機能とほぼ同じように機能し、組み込み機能を拡張して IDE をカスタマイズできます。使用可能なプラグインを調べるには、設定 | プラグインマーケットプレースタブに移動します。

Customize WebStorm: Rainbow Brackets plugin installed

UI テーマ

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

Customize WebStorm: select UI theme

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

禅モード

VS Code と同様に、コーディングに集中したいときはいつでもモードに切り替えることができます。メインメニューで移動 | どこでも検索を選択し、「enter zen mode」と入力します。同じ操作を行いますが、完了したら禅モードを終了を選択します。

Customize WebStorm: Zen mode

一般的な VS Code ワークフローを複製する

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

コマンドパレット

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

Customize WebStorm: Command Palette

検索および置換

WebStorm の検索と置換のワークフローは VS Code のものと若干異なりますが、原理は同じです。WebStorm では、特定のファイル内とプロジェクト全体の両方でテキスト文字列を検索して置換できます。

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

Customize WebStorm: search and replace

AI 機能

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

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

プロジェクトビュー設定

WebStorm には独自のエクスプローラープロジェクトビューがあり、動作が少し異なります。たとえば、ファイルをエディターで開くには、ファイルをダブルクリックする必要があります。VS Code で慣れていた設定に合わせてデフォルトの設定を変更する方法は次のとおりです。

Project view: customize default settings

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

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

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

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

保存時のアクション

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

Customize WebStorm: set up actions on save

サポートを受ける方法

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

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

関連ページ:

変更の保存と復元

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

別の JetBrains IDE から WebStorm に移行する方法

このセクションでは、別の JetBrains IDE のユーザーとしてよくある質問を取り上げ、より早く使い始めることができるようにします。WebStorm と他の JetBrains IDE の共通点は何ですか? :JetBrains IDE には多くの共通点があるため、いずれかの IDE を使用した経験があれば、WebStorm の初期オンボーディングプロセスの半分はすでに完了しています。すべての IDE で見た目も動作も同じである点は次のとおりです。キーバインド – JetBrains IDE は...

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

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