自訂 IDX 工作區

Project IDX 可讓您根據專案的獨特需求打造專屬的工作區 定義單一 .idx/dev.nix 設定檔來說明：

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

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

Nix 和 IDX

IDX 使用 Nix 來定義 為每個工作區調整環境設定具體來說，IDX 使用：

  • Nix 程式設計語言 說明工作區環境Nix 是一種功能性的程式設計語言。 您可以在 dev.nix 檔案中定義的屬性和套件程式庫 遵循 Nix 屬性組合 語法

  • Nix 套件管理工具 適用於工作區的系統工具這類似於 OS 專屬的 套件管理工具，例如 APT (apt 和 apt-get)、Homebrew (brew) 和 dpkg。

由於 Nix 環境可供重現及宣告， IDX，這表示您可以在自己的 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";
      };
    };
  };
}

加入系統工具

如要在工作區中新增系統工具，例如 雲端服務，請在 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 工作區更容易共用及重現。

使用本機節點二進位檔

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

為了方便起見，如果您位於含有 node_modules 的目錄中 資料夾 (例如網路專案的根目錄)、本機安裝的二進位檔 無需 npx 前置字串，即可直接叫用。

新增 gcloud 元件

適用於 Google 的 gcloud CLI Cloud 可供所有 IDX 使用 工作區

如果您需要其他元件，可將其新增至 dev.nix 檔案，例如 例如：

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

新增 IDE 擴充功能

您可以使用 OpenVSX 擴充功能登錄檔，有兩種方法：

  • 使用 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.*)

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

自訂預覽

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

設定工作區圖示

您可以加入名為 在 .idx 目錄中 dev.nix 檔案旁邊的 icon.png。IDX 就會在資訊主頁中以這個圖示代表工作區

由於這個檔案可簽入原始碼控管機制 (例如 Git)，因此這是 讓所有專案成員看到同一個圖示 或專案 ID由於這個檔案可在 Git 分支版本中各不相同 甚至能在「Beta 版」階段和 「Production」新的應用程式版本

將自訂內容轉換成範本

將環境設定轉換為「入門環境」任何人都沒有 建立新專案，請參閱建立自訂的 範本

查看所有自訂選項

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