演習 - プロジェクトとエディターの設定をカスタマイズする

完了

devcontainer.json ファイルを使用すると、コンテナー化された Visual Studio Code セットアップでさまざまな設定を構成できます。 これまで、Python プロジェクトの dev コンテナーを構成しました。 ただし、微調整が必要な部分とさらに自動化できる設定タスクがいくつかあります。

この演習では、devcontainer.json ファイルを使用してこれらの点を調整し、開発者が指定した設定ステップを実行しなくてもプロジェクトが動作するようにします。

Visual Studio Code 拡張機能をインストールする

コンテナーには、(基本イメージでわかるように) Microsoft Python 拡張機能が付属しています。 Python 拡張機能により、Python ファイルでスニペット、リンティング、IntelliSense などが有効になります。 ただし、templates フォルダーの index.html ファイルは Jinja テンプレートであり、そのファイルで構文を強調表示するには、別の拡張機能をインストールする必要があります。

  1. F1 キーを押してコマンド パレットを開きます。
  2. 拡張機能を入力し、[拡張機能: 拡張機能のインストール] を選択します。
  3. 右側の拡張機能エクスプローラーで、jinja を検索 します
  4. [ インストール] を選択します。
  5. wholroyd から Jinja 拡張機能を右クリックし、[devcontainer.jsonに追加] を選択します。
  6. devcontainer.json ファイルに戻り、Jinja 拡張機能が extensions セクションに追加されていることを確認します。
  7. devcontainer.json ファイルを保存します。

依存関係のインストールを自動化する

現在のところ、プロジェクトを初めて設定する開発者は、依存関係をインストールするために pip3 install --user -r requirements.txt を実行することを知っている必要があります。 これらの依存関係がないとプロジェクトは実行されませんが、他の開発者はそれがわからない可能性があります。

  1. postCreateCommand オプションのコメントを解除します。

    "postCreateCommand": "pip3 install --user -r requirements.txt"
    
  2. devcontainer.json ファイルを保存します。

これにより、コンテナーが作成されるたびに、コンテナーによって依存関係が自動的にインストールされます。

新しいコンテナーを再構築する

  1. F1 キーを押してコマンド パレットを開きます。
  2. リビルド 」と入力し、「 開発コンテナー: コンテナーのリビルド」を選択します。

devcontainer.json ファイルで指定した変更を使用してコンテナーが再構築されます。

コンテナーがリビルドされるたびに、コンテナーは削除されて完全に再作成されます。 コンテナーがリビルドされるとき、ターミナルの履歴は保持されません。

Jinja 拡張機能によって実現された構文の強調表示を確認する

  1. templates/index.html ファイルを開きます。

  2. 33 行目まで下にスクロールし、構文の強調表示が for ループにあることを確認します。 この構文の強調表示は、Jinja 拡張機能によって有効になります。

    構文が強調表示された for ループを強調する Jinja テンプレートのスクリーンショット。

アプリを実行する

  1. を押して Visual Studio Code 統合ターミナルを開きます。

  2. 次のコマンドを使用してアプリを実行します。

    python app.py
    
  3. 依存関係をインストールする必要がないことに注意してください。 単純にアプリケーションが実行されます。

これで、コンテナーがカスタマイズされ、機関向けに自動化されました。 Dev Containers を使用してこのプロジェクトを開いた開発者は、すぐにこれを実行して、コードの記述に取り掛かることができます。

次のユニットでは、開発コンテナーに追加のソフトウェアをインストールする方法について説明します。