Visual Studio CodeとGitの初心者ガイド – techsyncer

Visual Studio (VS) Codeの初心者は、コードエディターしか見ていないかもしれません。しかし、VS Codeの真の力は、拡張機能、統合ターミナル、その他の機能にあります。このハンズオンチュートリアルでは、Gitリポジトリを使ってVisual Studio Codeの使い方を学ぶことになります。

組み込みのVS Codeツールといくつかの拡張機能を使用して、コードを書き、そのコードをソースコントロールに単一のインターフェースでコミットする方法を学びます。

このブログ投稿は、eBook「管理者からDevOpsへ：AzureでのDevOpsのやり方」の一部です。この章が気に入った場合、AzureでのDevOpsについて学びたい方は、ぜひチェックしてみてください！

チュートリアルの概要

このチュートリアルでは、Windowsで様々なVS Codeの機能を使用して、Visual Studio CodeとGitを使ってプロジェクトを構築する方法を学びます。小さな概念実証(POC)プロジェクトとしてTerraformを使用してAzure VMを構築する方法を見つけるように指示されました。VS Codeを持っており、フルIDEとしての機能があることを聞いたことがあり、それを試してみたいと思っています。

以下の手順を実行します：

チームと共有するためのVS Codeワークスペースを作成します
Terraform拡張機能をインストールします
命名規則とAzureサブスクリプションに合わせてTerraformの設定ファイルを変更します
何度も繰り返し入力するよくあるタスクのスニペットを作成します。
Terraformの構成ファイルをGitリポジトリにコミットします。

このチュートリアルは、Terraformを使用してAzure VMをデプロイする方法を示すものではありません。そのため、TerraformとAzure VMの記事がすでにあります。このチュートリアルでは、Visual Studio Codeの学習に焦点を当てます。

これは興味深いプロジェクトですか？それなら、以下の手順に従って始めましょう！

前提条件

このVisual Studio Code Gitチュートリアルに従うには、次のものが必要です：

VS Code – すべての例はVS Code 1.44を使用していますが、以前のバージョンでも動作する可能性があります。
Terraform – すべての例は、Windows v0.12.24用のTerraformを使用しています。
Git for Windowsがインストールされています – すべての例はv2.26を使用しています。VS CodeをGitのデフォルトエディタにする場合は、インストール時に選択してください。

Gitリポジトリをクローンする

このチュートリアルでは、GitHubリポジトリでコードを扱うことに焦点を当てるため、最初のタスクはそのGitHubリポジトリをローカルコンピュータにクローンすることです。

このプロジェクトでは、VSCodeDemoというGitHubリポジトリで作業します。VS CodeにはネイティブのGit統合があり、追加の設定なしでGitリポジトリをクローンすることができます。以下の手順で行ってください：

Ctrl-Shift-Pでコマンドパレットを開き、gitと入力します。すると、以下のようにさまざまなオプションが表示されます。

2. Git: Cloneを選択します。するとVS CodeはリポジトリのURLを求めるプロンプトが表示されます。ここで、URL https://github.com/NoBSDevOps/VSCodeDemo.gitを入力してEnterキーを押します。

3. クローンするプロジェクトファイルを配置するフォルダを選択します。このプロジェクトでは、リポジトリのフォルダをC:\のルートに配置します。リポジトリの場所を選択すると、VS Codeはバックグラウンドでgit.exeを呼び出してリポジトリをコンピュータにクローンします。

4. 完了すると、VS Codeはクローンしたリポジトリをすぐに開くかどうかを確認するプロンプトが表示されます。以下のように表示された場合、Openをクリックして開きます。

これで、VS CodeでGitリポジトリのフォルダが開かれました。これから、この開いているフォルダと実行するすべての設定を保存するために、ワークスペースを作成する必要があります。

ワークスペースの作成

Gitリポジトリが含まれるフォルダを開いた状態で、ファイルメニューに移動し、ワークスペースを名前を付けて保存…をクリックしてワークスペースを保存します。

プロジェクトフォルダにプロジェクトとしてワークスペースを保存します。VS Codeはその後、Gitリポジトリフォルダにproject.code-workspaceという名前のファイルを作成します。このワークスペースは開いていたフォルダを認識します。将来、このワークスペースが開かれると、自動的にC:\VSCodeDemoフォルダが開かれます。

今度は、フォルダ名の代わりにワークスペースの名前が表示されます。

拡張機能の設定

拡張機能は、VS Codeの最も便利な機能の一つです。拡張機能を使用すると、さまざまなプロジェクトを管理するための機能を追加することができます。このチュートリアルでは、Terraformを使用します。

ワークスペースの左側のサイドバーで、Terraformの構成ファイルの1つを開きます。エディタータブが表示され、テキストが表示されますが、それだけです。通常の構文の強調表示やその他の機能はありません。VS Codeはこれをプレーンテキストファイルとして扱い、それに応じて表示します。それを解消しましょう。

No syntax highlighting for a Terraform configuration file

VS CodeがTerraformの構成ファイルを「理解」するためには、拡張機能が必要です。拡張機能は、新しい機能の世界を開くVS Codeの重要な部分です。この場合、Terraformの拡張機能が必要で、Terraformの構成ファイルの作成とインフラストラクチャの展開をサポートします。

Terraformの拡張機能をインストールするには、アクティビティバーの拡張機能ボタンをクリックし、terraformと検索します。複数の拡張機能が表示されますが、このプロジェクトでは、Mikael Olenfalkが作成したトップの結果のインストールをクリックします。VS Codeはその後、拡張機能をインストールします。

インストールが完了したら、ワークスペースに戻り、ワークスペース内のTFファイルの1つをクリックします。拡張機能を使用する際に最も明らかな違いの1つである構文の色付けがすぐに表示されます。

次のスクリーンショットでは、VS Codeがコメントを「知っている」（緑色で表示）、文字列を「知っている」（赤色で表示）などしていることがわかります。これにより、Terraformの設定ファイルを読みやすくすることができます。

Terraform syntax-highlighting performed by the VS Code Terraform extension

MikaelのTerrafom拡張機能には、さらに多くの機能が含まれています。Terraformを使用する場合にこの拡張機能から得られる潜在的な利点をすべて調べてください。

コード編集

インターネット上でスクリプトや設定ファイルを見つけた場合、必ずしも必要な形式であるとは限りません。何らかの方法でそれを変更する必要があります。

このチュートリアルの例では、「infrastructure-before.tf」というTerraformの設定ファイルで、mainブロックのラベルを「project」に変更したいとします。そのためには、テキストの検索と置換を行う必要があります。VS Codeでは、複数の方法でこれを行うことができます。

文字列を検索して別の文字列に置換する最も一般的な方法の1つは、検索と置換の機能です。

Ctrl-F を押すと、以下のスクリーンショットに似たダイアログが表示されます。ここで検索したい文字列を入力することができ、下向きの矢印をクリックすると置換する文字列を入力するスペースが表示されます。以下のスクリーンショットでは、大文字と小文字を区別する検索や正規表現を使用した検索のオプションが表示されています。

Ctrl-D を使用して「検索して置換」も行うことができます。まず、検索したいテキストを選択し、Ctrl-D を押し始めます。すると、VS Code がその文字列の各インスタンスを点滅するカーソルでハイライト表示します。

すべてのアイテムを選択したら、入力を開始すると、VS Code がすべてのインスタンスを一括で変更します。まるで個別に選択したかのようです。

Synchronizing changes with multiple cursors

スニペットを使用して時間を節約する

たとえば、Terraform と Azure に本格的に取り組んでおり、以下のコードスニペットで新しい Azure リソースグループを作成するための Terraform 構成ファイルブロックを入力するのに飽きてきたとしましょう。

resource "azurerm_resource_group" "<element name>" {
    name     = "<resource group name>"
    location = "<region>"
}

これらのブロックを作成する時間を節約するために、VS Code スニペットを作成します。

VS Code スニペットを作成するには:

azurerm_resource_group ブロックを Infrastructure-before.tf Terraform 構成ファイルからコピーします。

2. Ctrl-Shift-P を押してコマンドパレットを開きます。

3. 「snippets」と入力してオプションのリストをフィルタリングします。

4. 環境設定: ユーザースニペットの構成を選択します。これにより、通常は言語ごとに分けられたすべてのスニペットファイルのリストが表示されます。

5. “terraform” と入力して、Terraformのスニペットでフィルタリングします。

6. terraform (Terraform)を選択して、Terraformのスニペットファイル(terraform.json)を開きます。

Terraformのスニペットファイルが開かれたら、コメントをすべて削除し、以下のJSON要素をコピーして貼り付けます。

{
     "Create Azure Resource Group Block": {
         "prefix": "rg",
         "body": [
             "resource \"azurerm_resource_group\" \"${1:block label}\" {",
             "\tname     = \"${2:name}\"",
             "\tlocation = \"${3:region}\"",
             "}"
          ],
          "description": "Creates a Terraform Azure Resource Group block"
      }
 }

タブ文字を直接スニペット内に置くことはできません。タブ文字を表すには、\tを使用する必要があります。また、二重引用符、ドル記号、中括弧、バックスラッシュなどの文字は、バックスラッシュでエスケープする必要があります。

8. terraform.jsonファイルを保存します。

9. Terraformの設定ファイルに戻り、”rg” と入力します。すると、スニペットを展開するオプションが表示されます。

10. 表示されるように、rgスニペットを選択します。スニペットが展開され、3つのアイテムがハイライトされることに注意してください。

VS Codeは、terraform.jsonスニペットファイル(${1:ブロックのラベル})で定義された変数によってプレースホルダーとして各単語をハイライトします。

この時点で、Tabキーを押して必要な値を入力するだけで、ブロック自体の作成方法を心配する必要はありません。

スニペットの構文の詳細については、Visual Studio Codeのスニペットのドキュメントを参照してください。

Gitへのコードのコミット

この時点で、Terraformの構成ファイルをいくつか含む公開GitHubリポジトリをクローンしました。ファイルを編集し、これらの変更をGitHubリポジトリに戻す準備ができました。

GitHubリポジトリに変更を戻すには、まずVisual Studio CodeとGitを使用して、ローカルにクローンしたGitリポジトリに変更をコミットする必要があります。先ほどGitHubリポジトリをクローンしたときに、構成ファイルだけでなくGitリポジトリもダウンロードしました。

これまでの手順に従っている場合、クローンしたGitリポジトリが開かれ、2つの保留中の変更があるはずです。それはどのように分かるのでしょうか？以下のように、アクティビティバーの数値を確認することで分かります。

Visual Studio CodeでGitリポジトリを開いていると、アクティビティバーにローカルのGitリポジトリにステージングおよびコミットできるファイルの数が表示されます。

左側のソースコントロールアイテムをクリックすると、2つのアイテムが表示されます。1つはinfrastructure-before.tfというTerraformの構成ファイルで、右側に赤いMが表示され、変更されていることを示しています。もう1つは以前に保存したワークスペース（project.code-workspace）で、右側に緑色のUが表示されています。これは追跡されていないことを意味し、現在ソースコントロールされていません。

これらのファイルがGitHubのリポジトリに戻るようにするには、まずこれらのファイルをなぜコミットしているのかを示す有益なコミットメッセージを作成してください。メッセージは任意の説明的な要約で構いません。コミットメッセージを書いたら、変更をステージします。GitでのVisual Studio Codeでの変更のステージングは、ファイルの内容をステージングエリアに追加し、リポジトリにコミットする準備を整えるものです。

ソース管理ペインにいる場合、以下に示すように各ファイルの横にある+アイコンをクリックしてステージングします。

ステージングが完了したら、以下に示すようにチェックマークをクリックしてステージングされた変更をすべてコミットします。

おそらく、Gitでuser.nameとuser.emailを設定する必要があるというエラーメッセージが表示されるかもしれません。

Your Git user is not defined in the Git configuration

問題ありません。Gitが必要とする情報を提供するだけです。それを行うには、VS Codeの統合ターミナルに移動し、次の2つのコマンドを実行して、メールアドレスと名前を自分のものに変更します。

git config --global user.email "[email protected]"
git config --global user.name "Adam Bertram"

それでファイルをコミットしてみてください。これでファイルがリポジトリにコミットされるはずです。

VS Codeは、手動で各ファイルの横にある+をクリックせずに、変更されたすべてのファイルを一度にステージングすることができます。

もしチームで共有リポジトリで作業している場合、次のステップはこれらの変更をGitHubリポジトリにプッシュするか、プルリクエストを作成することです。

結論

VS Codeは機能豊富なIDEです。コードの作成と理解を助けるだけでなく、インフラストラクチャの構築や変更、ユーティリティの呼び出し等も行うことができます。VS Codeは開発作業をすべて管理するための場所を提供します。

このチュートリアルではVS Codeの一部しかカバーしていませんが、このIDEはさらに多くのことができます。VS Codeの機能について学びたい場合は、Visual Studio Codeについて知っておくべきこと：チュートリアルをチェックしてみてください。