Visual Studio Code のしくみ

  • 4 分

Visual Studio Code の主な機能について理解したので、ここでは Visual Studio Code のしくみを見てみましょう。すぐに使用できる機能と、拡張機能マーケットプレースを通じて追加できる機能について説明します。

Visual Studio Code では、メモリ占有領域は軽量です。 すぐに使える機能としては、Visual Studio Code では次が利用できます。

  • エディター、エクスプローラー、検索、デバッガー、ソース管理、ターミナル、拡張機能の機能を含む UI。
  • HTML、CSS、JavaScript、TypeScript などの複数の言語のサポート。
  • ソース管理のための Git との統合。
  • JavaScript を実行およびデバッグするための Node.js との統合。

一部の開発者にとっては、Web アプリケーション プロジェクトを開始するために必要なのは、この最初のインストールで全てです。 しかし、ほとんどの開発者は、拡張機能をインストールすることで、他の言語のツールとサポートをさらに追加したいと考えています。

拡張機能とは

拡張機能は、Visual Studio Code UI にプラグインし、次のような機能のサポートを追加するコード パッケージです。

  • UI 配色パターンの外観またはエクスプローラーに表示されるファイル アイコンのスタイルを変更するテーマ。
  • リンターやコード清書ツールなどの生産性ツール。
  • その他のプログラミング言語 (C++、Python、その他多数)。
  • デバッグのサポート。

Visual Studio Code には、必要なものを迅速に追加し、不要なものを除外することができます。

拡張機能はどこで入手できますか?

Visual Studio Code 内の拡張機能マーケットプレースから、拡張機能を検索、ダウンロード、インストールできます。これは、Visual Studio Marketplace と統合されています。 たとえば、フォーマッタ、プログラミング言語、テーマなどのカテゴリで検索できます。 次のスクリーンショットは、"フォーマッタ" カテゴリで使用できる多くの拡張機能の一部を示しています。 追加する拡張機能が見つかったら、 [インストール]を選択します。

Visual Studio Code のスクリーンショット。拡張機能マーケットプレース ビューが表示され、Prettier 拡張機能が表示されています。

拡張機能は誰が作成していますか。

Microsoft では、C/C++、Python、Docker など、多くの一般的な拡張機能を公開しています。 個人や Red Hat のような企業などのサード パーティも、マーケットプレースに向けて拡張機能を作成して公開します。 ほとんどの拡張機能は無料です。 ただし、一部のプロバイダーは、拡張機能をダウンロードして使用するために料金を請求します。 発行元は拡張機能名の下に表示されます。

拡張機能 Marketplace ビューが表示され、Microsoft が発行した Python 拡張機能が表示されている Visual Studio Code のスクリーンショット。

シナリオ

次に、Visual Studio Code のしくみに関するこの知識を適用して、現在のシナリオで Visual Studio Code を設定する方法を見てみましょう。

シナリオの最初の部分では、ローカル レストラン用の Web サイトを構築しようとしていることを思い出してください。 これを実現するには、Node.js アプリケーションをビルドすることにします。

ここでは、次の手順を実行します。

  1. まず、コンピューターのプラットフォーム (Windows、macOS、または Linux) に適した Visual Studio Code バージョンをダウンロードしてインストールします。

  2. 次に、Visual Studio Code を起動し、組み込みのターミナルを使用して、基本的な Node.js アプリケーションをスキャフォールディングするのに役立つNode.js パッケージをインストールします。 スキャフォールディングにより、Node.js アプリケーションを実行するために必要な複数のファイルが作成されます。

  3. エディター ワークスペースを使用して、これらのファイルを編集します。 エディターに組み込まれている IntelliSense は、コード補完のヒントを提供することで、コードの記述と編集を支援します。 この機能は、時間を節約し、コードの構文が正しいことを確認するのに役立ちます。

  4. 作業しながら、組み込みのソース管理ビューを使用したり、統合ターミナルから Git コマンドを発行することで、GitHub にファイルをチェックインできます。 GitHub と統合することで、時間の経過に伴うコードの変更をより適切に管理するのに役立つ、作業バージョンを管理できます。

  5. Visual Studio Code を慣れてきたので、コードの形式を読みやすくすることで生産性を向上できる Visual Studio Code 拡張機能をインストールすることにしました。 Prettier 拡張機能を検索してインストールします。

  6. 準備が完了したら、組み込みのデバッガーを使用してアプリケーションをテストし、その外観を確認できます。

レストランの Web サイトを起動した後は、レストランのために作業している他のプロジェクトに対して Visual Studio Code を引き続き使用できます。

インベントリ アプリケーションの開発を準備するには、Microsoft C/C++ 拡張機能 および Microsoft Visual C++ (MSVC) コンパイラ ツールセットをダウンロードしてインストールします。 このセットアップにより、コンピューターで C++ コードを実行およびデバッグできます。

レストランのデータ分析を実行するように Visual Studio Code を構成するには、Python 拡張機能をダウンロードしてインストールします。この拡張機能には、Jupyter 拡張機能も含まれています。 コンピューターに Python がまだインストールされていない場合は、Python インタープリターをダウンロードしてインストールする必要もあります。

いくつかの拡張機能、コンパイラ、インタープリターをインストールすると、Visual Studio Code がセットアップされ、複数の異なるアプリケーションを開発できるようになります。 さらに、必要な機能のみを追加することで、コード エディターを軽量に保ちました。