VS Code で新しいワークスペースを作成する方法

Visual Studio Code ワークスペースは、単一のウィンドウで開かれるファイルのコレクションです。ワークスペースは単一のフォルダーにすることができますが、場合によっては、マルチルートワークスペースと呼ばれる開発ワークフローに複数のファイルが含まれることがあります。プロジェクトに取り組んでいて、このプラットフォームで複数のファイルを開く必要がある場合は、新しいワークスペース機能が役に立ちます。同じウィンドウで複数のファイルを開くことができるため、必要なすべてのドキュメントに簡単にアクセスできます。.code-Workspaces ファイルは、プロジェクトのフォルダー構成を保存するために使用されます。設定が完了すると、さまざまなファイルが同じウィンドウで自動的に開きます。また、シェルスクリプトを作成するよりもセットアップがはるかに速く簡単です。VS Code ワークスペースの作成方法を確認してください。

VS Code での新しいワークスペースの作成

ワークスペースは多くの場合、コードのテストと開発に使用できるチームのコードベースのローカルコピーです。ほとんどの場合、VS フォルダーを開いたときに自動的に作成されます。ただし、プロジェクトのさまざまなブランチで行ったすべての変更を追跡するために、複数のファイルを作成することが必要になる場合があります。これらのファイルを VS Code ワークスペースに統合する方法は次のとおりです。

ワークスペースに含めるフォルダーを選択します。
「ファイル」、「ワークスペースにフォルダーを追加」の順に移動して、それらをワークスペースに追加します。
ワークスペースを設定したら、[ファイル]、[ワークスペースを名前を付けて保存] の順に選択して、新しいフォーラムを保存します。

新しいワークスペースが VS Code 上に作成され、名前は (Name).code-Workspace として表示されます。

ワークスペースの設定

これらの設定はデフォルト設定をオーバーライドし、ワークスペースを好みに合わせてカスタマイズするために使用できます。これらは JSON ファイルに保存され、その場所はフォルダーの開き方によって決まります。

単一フォルダーのワークスペース設定
VS Code で新しいワークスペースを作成する方法

フォルダーをワークスペースとして開くと、設定は .vscode/settings.json にあります。

マルチルートワークスペースの設定
VS Code で新しいワークスペースを作成する方法

開いたフォルダーが .code-workspace ファイルの場合、すべてのワークスペース設定が .code-workspace ファイルに追加されます。

ルートフォルダーごとに設定をカスタマイズすることはできますが、その設定は .code-workspace で定義された設定をオーバーライドします。

ワークスペースの起動構成とタスク

ワークスペースの設定の構成方法と同様に、タスクと起動もワークスペースに合わせてパーソナライズできます。フォルダーを .code-workspace ファイルまたはワークスペースとして開いている場合、タスクおよび起動構成の場所は .vsh ファイルまたは .workspace ファイル内にあります。これらの設定はフォルダーから調整することもできます。

新しい VS Code ワークスペースを最適化する

TypeScript、JavaScript、Node JS などのさまざまなプログラミング言語のサポートが組み込まれている Workspace は、開発者にとって理想的なツールです。これらのヒントにより、プラットフォームの効率が向上し、操作が簡単になります。

端子

オペレーティングシステムが提供するデフォルトのターミナルを使用している可能性があります。VS Code では、プラットフォームは OS の機能に依存する必要がないようにしたいと考えていました。VS Code には、すべての要件を 1 か所にまとめた組み込みターミナルが付属しています。これは、開発プロジェクトを追跡し、プロジェクトがスムーズに実行されていることを確認するための優れた方法です。アイコンの名前を変更したり色を変更したりできるため、プロジェクトのさまざまな端末を区別するのも簡単になります。

ラップタブ

この機能は、複数のコンポーネントが使用される大規模なプロジェクトに取り組んでいる開発者にとって便利です。あるコンポーネントから別のコンポーネントに移動するときに、すべてのファイルを追跡するのは難しい場合があります。VS Code では、ブラウザーにタブが表示され、その中にあるものを表示するにはタブから別のタブにスクロールする必要があります。

より効率的な方法は、Cmd + をクリックして「タブのラップ」を検索して、これらのタブをラップすることです。この機能により、さまざまなタブに何が含まれているかを簡単に確認できるようになります。

タブを固定する

開発者としては、ワークスペースを可能な限り整理しておくことをお勧めします。これを行うには、頻繁に使用するタブを画面の前面に固定します。Cmd + または Ctrl + ボタンを押して「タブの固定」を検索することで、これらのタブの外観と操作性をカスタマイズすることもできます。

ユーザーインターフェース

ターミナルのインターフェイスは、エクスプローラー、検索、プロジェクトマネージャー、出力などのさまざまなオプションがあるように設定されています。また、複数の詳細を簡単に検索して変更できるフッターのようなセクションもあります。VS Code では、これらのタブをドラッグアンドドロップして、好みに合わせて並べ替えることができます。頻繁に使用するオプションを上部近くに配置したり、アクセスしやすくするためにカスタマイズしたりできます。ユーザーインターフェイスをパーソナライズすると、ワークスペースのナビゲーションが容易になります。

言語

Visual Studio Code で新しいページを作成する場合、ファイルには無題が付けられるため、これらの詳細を自分で入力する必要があります。次に、ファイル名に移動して拡張子を入力する必要があります。このプロセスは、特に多数のファイルを扱う場合には、退屈になる可能性があります。

IDE がファイルを参照できるようにすることで、プロセスを最適化できます。その後、以前の命名システムを使用して、作成する新しいファイルに名前が割り当てられます。

プレビュー

VS Code にはイライラする機能がいくつかあります。たとえば、プレビューでファイルを開いた後、最初のファイルに変更を加えずにすぐに別のファイルを開くと、プログラムは最初のファイルを閉じます。これを変更して両方のファイルをプレビューで開いたままにしたい場合は、「設定」に移動して「プレビューを有効にする」を検索します。チェックボックスにチェックを入れて、必要な変更を加えます。

新しい PC のセットアップ

VS Code ワークスペースを好みに合わせてカスタマイズしてパーソナライズした後、新しい PC を購入する場合があります。新しいマシンは素晴らしいものですが、ワークスペースを再構成する必要があるのは面倒な場合があります。

同期を設定すると、すべての構成を 1 か所に保存できます。別のデバイスを取得すると、古いデバイスの設定が新しい VS Code ワークスペースに自動的に適用されます。こうすることで、新しい PC で Workspace を再構成する必要がなくなります。

リプレイを開く
VS Code で新しいワークスペースを作成する方法

実稼働環境で Web アプリのデバッグを始めるのは、困難で時間がかかる場合があります。OpenReplayを使用すると、ユーザーの行動をすべて監視して再生できるため、アプリがどのように動作するかを確認し、発生する可能性のある問題を検出できます。OpenReplay は、 LogRocketやFullStoryなどの他のデバッグアプリケーションに代わる無料のオープンソースであるため、優れたオプションです。デバッグプログラムを使用すると、Workspace の使用時間を大幅に節約できます。

GitHub
VS Code で新しいワークスペースを作成する方法

VS Code には、GitHub統合が組み込まれています。これにより、ファイルを GitHub にすばやくプッシュできます。VS Code から GitHub に接続すると、git コマンドの作成に時間を費やす必要がなくなります。VS Code の統合により、ファイルの保守が簡単になります。

すべてのフォルダーを 1 つの場所に

Workspace を使用すると、チームを簡単に整理整頓できます。ファイルとフォルダーを 1 つの場所に保存できるため、ボタンをクリックするだけで開いて表示できます。ワークスペースを最適化して効率を向上させ、進行中のプロジェクトを追跡することもできます。このガイドを使用すると、VS Code でワークスペースを作成し、ニーズに合わせてカスタマイズするための準備が整います。

VS Code 上に新しいワークスペースをセットアップしましたか? 以下のコメントで、ワークスペースをどのように作成して最適化したかをお知らせください。