序章

Visual Studio Code は、主にMicrosoftによって開発された、無料のオープンソースのクロスプラットフォームテキストエディターです。 JavaScriptやCSSなどのWebテクノロジーを使用しており、コミュニティで作成されたプラグインの大規模なエコシステムを促進して、その機能をさまざまなプログラミング言語や機能に拡張しています。

このチュートリアルでは、Visual Studio Codeコマンドラインインターフェイスをインストールし、それを使用してファイルとディレクトリを開き、ファイル間の変更を比較し、拡張機能をインストールする方法を学習します。

前提条件

このチュートリアルを完了するには、VisualStudioCodeをインストールする必要があります。 プラットフォームにCodeをインストールする方法については、 VisualStudioCodeの公式セットアップのドキュメントを参照してください。

VisualStudioCodeコマンドラインインターフェイスのインストール

使用する前に、VisualStudioCodeコマンドラインインターフェイスをインストールする必要がある場合があります。 これを行うには、最初に通常のVisualStudioCodeグラフィカルインターフェイスを起動します。 初めてアプリを開く場合、デフォルトの画面の左側にアイコンバーがあり、デフォルトのウェルカムタブがあります。

A screenshot of the default "Get Started" screen in the Visual Studio Code interface, including an icon toolbar along the left-hand side, a few suggested activities to get started such as "New File..." and "Open...", and some highlighted instructional walkthroughs

Visual Studio Codeには、コマンドラインインターフェイスをインストールするための組み込みコマンドが用意されています。 MacではCommand+Shift+Pと入力し、WindowsとLinuxではControl+Shift+Pと入力して、コードのコマンドパレットを表示します。

A screenshot of the Visual Studio Code interface with the Command Palette activated, waiting for input to be entered after its '>' prompt

これにより、コードウィンドウの上部近くにプロンプトが開きます。 プロンプトにshell commandと入力します。 Shell Command: Install 'code' command in PATHを読み取る正しいコマンドにオートコンプリートする必要があります。

A screenshot of the Visual Studio Code interface, with the Command Palette activated and the "Install 'code' command in PATH" command highlighted

ENTERを押して、強調表示されたコマンドを実行します。 インストールプロセスを完了するために、管理者の資格情報を入力するように求められる場合があります。

これで、codeコマンドラインコマンドがインストールされました。

--versionフラグを指定してcodeを実行し、インストールが成功したことを確認します。

  1. code --version
Output
1.62.1 f4af3cbf5a99787542e2a30fe1fd37cd644cc31f x64

出力にバージョン文字列が含まれている場合は、VisualStudioCodeコマンドラインインターフェイスが正常にインストールされています。 次のいくつかのセクションでは、それを使用するいくつかの方法を示します。

codeコマンドでファイルを開く

codeコマンドを1つ以上のファイル名で実行すると、Visual StudioCodeGUIでそれらのファイルが開きます。

  1. code file1

これにより、コードでfile1ファイルが開きます。

  1. code *.md

これにより、Codeの現在のディレクトリにあるすべてのマークダウン(.md)ファイルが開きます。

デフォルトでは、ファイルは既存のコードウィンドウが利用可能な場合はそれで開かれます。 --new-windowフラグを使用して、VisualStudioCodeに指定されたファイルの新しいウィンドウを強制的に開きます。

codeコマンドでディレクトリを開く

codeコマンドに続けて1つ以上のディレクトリ名を使用して、新しいVisualStudioCodeウィンドウでディレクトリを開きます。

  1. code directory1 directory2

コードは、ディレクトリの新しいウィンドウを開きます。 --reuse-windowフラグを使用して、代わりに既存の最前面のウィンドウを再利用するようにコードに指示します。

codeコマンドで.code-workspaceワークスペースファイルを開く

codeコマンドを使用してワークスペースファイルを開くと、ディレクトリを開くのと同じように機能します。

  1. code example.code-workspace

これにより、--reuse-windowフラグを追加して既存のウィンドウを再利用しない限り、exampleワークスペースが新しいウィンドウで開きます。

codeコマンドを使用した拡張機能のインストール

codeコマンドラインツールを使用してVisualStudioCode拡張機能をインストールすることもできます。 そのためには、まず拡張機能の一意の識別子を知る必要があります。 この情報を見つけるには、最初にVisualStudioMarketplaceの拡張機能のページに移動します。

たとえば、JupyterNotebook拡張機能のページは次のとおりです。

https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

アドレスのitemNameパラメータに注意してください。 このパラメータの値ms-toolsai.jupyterは、この拡張機能の一意の識別子です。

この情報は、詳細情報セクションの右側の列の下部にあるマーケットプレイスページ自体にもあります。

A screenshot of the Jupyter extension's page on the Visual Studio Marketplace, highlighting the 'Unique Identifier ms-toosai.jupyter' unique id information in the page's right-hand column

この一意のIDを取得したら、それをcode --install-extensionとともに使用して拡張機能をインストールできます。

  1. code --install-extension ms-toolsai.jupyter
Output
Installing extension 'ms-toolsai.jupyter'... Extension 'ms-toolsai.jupyter' v2021.11.1001489384 was successfully installed.

--uninstall-extensionフラグと同じIDを使用して、拡張機能をアンインストールします。

codeコマンドを使用した2つのファイルの違いの表示

2つのファイル間の追加、削除、および変更を強調表示する標準の分割画面 diff を表示するには、--diffフラグを使用します。

  1. code --diff file1 file2

A screenshot of the Visual Studio Code diff interface, with two files side by side, and the second line highlighted, showing a few words have changed between the two versions

ファイルを開くのと同様に、これはデフォルトで最前面のウィンドウが存在する場合はそれを再利用します。 新しいウィンドウを強制的に開くには、--new-windowフラグを使用します。

codeコマンドを使用してstdinをVisualStudioCodeにパイプする

ほとんどのコマンドラインシェルの重要な機能は、あるコマンドの出力を次のコマンドの入力にパイプ(または送信)する機能です。 次のコマンドラインで、ls ~コマンドをcode -に接続する|パイプ文字に注目してください。

  1. ls ~ | code -

これにより、現在のユーザーのホームディレクトリのショートカットである~ディレクトリに対してlsコマンドが実行されます。 lsからの出力は、ホームディレクトリ内のファイルとディレクトリのリストになります。 これはcodeコマンドに送信されます。ここで、単一の-は、ファイルではなくテキストでパイプされたものを読み取る必要があることを示します。

codeは、入力を保持するために作成した一時ファイルに関する情報を出力します。

Output
Reading from stdin via: /var/folders/dw/ncv0fr3x0xg7tg0c_cvfynvh0000gn/T/code-stdin-jfa

次に、このファイルがコードGUIインターフェイスで開きます。

A screenshot of Visual Studio Code with a text file open, displaying the text piped in from the ls command. The text is standard directories such as Desktop and Documents, along with file1 and file2 used in the previous section

このコマンドは、入力が増えるまで無期限に待機し続けます。 CTRL+Cを押して、codeのリスニングを停止し、シェルに戻ります。

--new-windowフラグを追加して、Codeに入力用の新しいウィンドウを強制的に開かせます。

結論

このチュートリアルでは、Visual StudioCodeのcodeコマンドラインツールをインストールし、それを使用してファイルとディレクトリを開き、ファイルを比較し、拡張機能をインストールしました。

codeコマンドの詳細については、その--help関数を実行できます。

  1. code --help

を参照することもできます VisualStudioCodeの公式コマンドラインドキュメントまたは私たちを見てください VSCodeタグページ Visual Studio Codeのチュートリアル、技術的な講演、およびQ&Aの詳細については。