自訂 IDX 工作區

您可以透過定義單一 .idx/dev.nix 設定檔，根據專案的特殊需求調整工作區，該設定檔會說明以下項目：

  • 您需要能夠執行的系統工具 (例如從終端機執行)，例如編譯器或其他二進位檔。
  • 您需要安裝的 IDE 擴充功能 (例如程式設計語言支援)。
  • 應用程式預覽畫面應如何顯示 (例如執行網路伺服器的指令)。
  • 全域環境變數，可供在工作區中執行的本機伺服器使用。

如需完整的說明，請參閱 dev.nix 參考資料。

Nix 和 IDX

IDX 會使用 Nix 定義每個工作區的環境設定。具體來說，IDX 會使用：

  • Nix 程式設計語言：用於描述工作區環境。Nix 是一種功能性程式設計語言。您可以在 dev.nix 檔案中定義的屬性和套件程式庫，必須遵循 Nix 屬性集合語法。

  • Nix 套件管理工具：用於管理工作區可用的系統工具。這類似於特定作業系統的套件管理工具，例如 APT (apt 和 apt-get)、Homebrew (brew) 和 dpkg。

由於 Nix 環境可重現且具備宣告性，因此在 IDX 的情況下，您可以將 Nix 設定檔分享為 Git 存放區的一部分，確保所有在專案中工作的使用者都有相同的環境設定。

基本示例

以下範例顯示啟用預覽功能的基本環境設定：

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

新增系統工具

如要將系統工具新增至工作區，例如雲端服務的編譯器或 CLI 程式，請在 Nix 套件註冊表中找出唯一套件 ID，然後將其新增至 dev.nix 檔案的 packages 物件，前置詞為 `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_18
  ];
  ...
}

這與您通常使用特定 OS 套件管理員 (例如 APT (apt 和 apt-get)、Homebrew (brew) 和 dpkg) 安裝系統套件的方式不同。宣告式說明所需的系統套件，可讓 IDX 工作區更容易分享和重現。

使用本機節點二進位檔

就像在本機電腦上一樣，您可以使用 npx 指令，在終端機面板中執行與本機安裝的節點套件 (即在 package.json 中定義的套件) 相關的二進位檔。

為了提供額外的便利性，如果您位於含有 node_modules 資料夾的目錄 (例如網站專案的根目錄)，就可以直接叫用本機安裝的二進位檔，而不需要加上 npx 前置字串。

新增 gcloud 元件

所有 IDX 工作區皆可使用 gcloud Google Cloud CLI 的預設設定。

如果您需要其他元件，可以將這些元件新增至 dev.nix 檔案，如下所示：

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

新增 IDE 擴充功能

您可以使用 OpenVSX 擴充功能登錄檔，透過以下兩種方式在 IDX 中安裝擴充功能：

  • 使用 IDX 中的「Extensions」面板，即可探索及安裝擴充功能。這種做法最適合特定使用者擴充功能，例如：

    • 自訂色彩主題

  • 在 dev.nix 檔案中新增擴充功能。當您分享工作區設定時，系統會自動安裝這些擴充功能。這種做法最適合用於專案專屬擴充功能，例如：

    • 程式設計語言擴充功能，包括特定語言的偵錯工具
    • 專案中使用的雲端服務官方擴充功能
    • 程式碼格式設定工具

如要使用後者，您可以在 dev.nix 檔案中加入 IDE 擴充功能，方法是找出完整的擴充功能 ID (以 <publisher>.<id> 格式)，然後將其加入 idx.extensions 物件，如下所示：

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

新增常見服務

IDX 也提供簡化的設定，可用於開發期間可能需要的常用服務，包括：

  • 容器
    • Docker (services.docker.*)
  • 訊息
    • Pub/Sub 模擬器 (services.pubsub.*)
  • 資料庫
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

如要進一步瞭解如何在工作區中啟用這些服務，請參閱 dev.nix 參考資料中的 services.* 部分。

自訂預覽畫面

如要進一步瞭解如何自訂應用程式預覽畫面，請參閱預覽畫面說明文件。

設定工作區圖示

您可以為工作區選擇自訂圖示，方法是在 .idx 目錄中，將名為 icon.png 的 PNG 檔案放在 dev.nix 檔案旁邊。IDX 就會在資訊主頁中使用這個圖示代表您的工作區。

由於這個檔案可提交至原始碼控管工具 (例如 Git)，因此這是協助專案工作人員在使用 IDX 時，看到相同專案圖示的好方法。由於檔案可能會因 Git 分支而異，因此您甚至可以在處理應用程式的「beta」和「正式版」版本時，透過視覺效果區分工作區。

將自訂項目轉換為範本

如要將環境設定轉換為「初始環境」，讓任何人都能用來建構新專案，請參閱建立自訂範本的說明文件。

查看所有自訂選項

如需環境設定結構定義的詳細說明，請參閱 dev.nix 參考資料。