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

4 分

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

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

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

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

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

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

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

postCreateCommand オプションのコメントを解除します。
```
"postCreateCommand": "pip3 install --user -r requirements.txt"
```
devcontainer.json ファイルを保存します。

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

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

F1 キーを押して、コマンドパレットを開きます。
「rebuild」と入力し、[Dev Containers: Rebuild Container](Dev Containers: コンテナーを再構築する) を選択します。

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

Note

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

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

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

アプリを実行する

Ctrl + ` キーを押して、Visual Studio Code の統合ターミナルを開きます。
次のコマンドを使用してアプリを実行します。
```
python app.py
```
依存関係をインストールする必要がないことに注意してください。単純にアプリケーションが実行されます。

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