練習 - 自訂專案和編輯器設定

  • 4 分鐘

devcontainer.json 檔案可協助您設定容器化 Visual Studio Code 設定中的各種設定。 到目前為止，您已設定了 Python 專案的開發容器。 不過，仍有一些小地方和設定工作可讓您進一步自動化。

此練習會使用 devcontainer.json 檔案來修飾這些小地方，並讓開發人員無須任何設定步驟即可進行專案。

安裝 Visual Studio Code 延伸模組

容器隨附 Microsoft Python 延伸模組 (如您在基礎映像中所見)。 Python 延伸模組可在 Python 檔案中啟用程式碼片段、Lint 分析和 IntelliSense。 但是 templates 資料夾中的 index.html 檔案是一個 Jinja 範本，您需要安裝不同的延伸模組，才能在該檔案中取得語法醒目提示。

  1. 按下 F1 以開啟 [命令選擇區]。
  2. 鍵入 extension，然後選取 [延伸模組：安裝延伸模組]。
  3. 在右側的延伸模組總管中，搜尋 jinja。
  4. 選取安裝。
  5. 以滑鼠右鍵按一下來自 wholroyd 的 Jinja 延伸模組，然後選取 [Add to devcontainer.json] (新增至 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. 鍵入 rebuild，然後選取 [開發容器：重建容器]。

容器將會使用您在 devcontainer.json 檔案中指定的變更進行重建。

注意

每當重建容器時，系統便會移除容器並完全重建。 重建容器時，不會保存終端機歷程記錄。

檢查 Jinja 延伸模組提供的語法醒目提示

  1. 開啟 templates/index.html 檔案。

  2. 向下捲動到第 33 行，注意語法醒目提示正位於 for 迴圈上。 Jinja 延伸模組會啟用此語法醒目提示。

    Screenshot of a Jinja template, emphasizing a for loop with syntax highlighting.

執行應用程式

  1. 按 Ctrl + ` 以開啟 Visual Studio Code 整合式終端。

  2. 使用下列命令來執行應用程式：

    python app.py

  3. 請注意，您不需要安裝任何相依性。 應用程式即會執行。

容器現在會針對您的機構進行自訂及自動化。 任何使用開發容器開啟此專案的開發人員都可以立即執行，並開始撰寫程式碼。

在下一個單元，您將了解如何在開發容器中安裝額外的軟體。