ปรับแต่งพื้นที่ทำงาน IDX

IDX ของโปรเจ็กต์ช่วยให้คุณปรับแต่งพื้นที่ทํางานให้เหมาะกับความต้องการเฉพาะของโปรเจ็กต์ได้ด้วยการกําหนดไฟล์การกําหนดค่า .idx/dev.nix ไฟล์เดียวที่อธิบายข้อมูลต่อไปนี้

  • เครื่องมือระบบที่คุณต้องสามารถเรียกใช้ได้ (เช่น จากเทอร์มินัล) เช่น คอมไพเลอร์หรือไบนารีอื่นๆ
  • ส่วนขยาย IDE ที่ต้องติดตั้ง (เช่น การรองรับภาษาโปรแกรม)
  • ลักษณะที่ตัวอย่างแอปควรแสดง (เช่น คำสั่งสำหรับเรียกใช้เว็บเซิร์ฟเวอร์)
  • ตัวแปรสภาพแวดล้อมส่วนกลางที่ใช้ได้กับเซิร์ฟเวอร์ในเครื่องที่ทำงานอยู่ในเวิร์กスペース

ดูคำอธิบายที่สมบูรณ์เกี่ยวกับฟีเจอร์ที่มีให้บริการได้ในข้อมูลอ้างอิง dev.nix

Nix และ IDX

IDX ใช้ Nix เพื่อกำหนดการกำหนดค่าสภาพแวดล้อมสำหรับแต่ละเวิร์กスペース โดย IDX ใช้สิ่งต่อไปนี้

เนื่องจากสภาพแวดล้อม 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 แล้วเพิ่มลงในออบเจ็กต์ packages ของไฟล์ dev.nix โดยใส่ "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
  ];
  ...
}

ซึ่งแตกต่างจากวิธีที่คุณอาจติดตั้งแพ็กเกจระบบโดยใช้เครื่องมือจัดการแพ็กเกจเฉพาะระบบปฏิบัติการ เช่น APT (apt และ apt-get), Homebrew (brew) และ dpkg การอธิบายอย่างละเอียดว่าต้องใช้แพ็กเกจระบบใดบ้างจะช่วยให้แชร์และสร้างเวิร์กสเปซ IDX ซ้ำได้ง่ายขึ้น

ใช้ไบนารีของโหนดในเครื่อง

เช่นเดียวกับในเครื่องของคุณ คุณสามารถเรียกใช้ไบนารีที่เกี่ยวข้องกับแพ็กเกจ Node ที่ติดตั้งในเครื่อง (เช่น แพ็กเกจที่กําหนดไว้ใน package.json) ในแผงเทอร์มินัลได้โดยเรียกใช้ด้วยnpx คำสั่ง

เพื่อความสะดวกยิ่งขึ้น หากคุณอยู่ในไดเรกทอรีที่มีโฟลเดอร์ node_modules (เช่น ไดเรกทอรีรูทของโปรเจ็กต์เว็บ) คุณจะเรียกใช้ไบนารีที่ติดตั้งในเครื่องได้โดยตรงโดยไม่ต้องใส่คำนำหน้า npx

เพิ่มคอมโพเนนต์ gcloud

การกำหนดค่าเริ่มต้นของ gcloud CLI สำหรับ Google Cloud พร้อมใช้งานสำหรับ IDX workspace ทั้งหมด

หากต้องการคอมโพเนนต์เพิ่มเติม คุณสามารถเพิ่มลงในไฟล์ dev.nix ดังนี้ 

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

เพิ่มส่วนขยาย IDE

คุณติดตั้งส่วนขยายใน IDX โดยใช้รีจิสทรีส่วนขยาย OpenVSX ได้ 2 วิธี ดังนี้

  • โดยใช้แผงส่วนขยายใน IDX เพื่อค้นหาและติดตั้งส่วนขยาย แนวทางนี้เหมาะสําหรับชิ้นงานเฉพาะผู้ใช้ เช่น

    • ธีมสีที่กำหนดเอง

  • โดยการเพิ่มส่วนขยายลงในไฟล์ dev.nix ระบบจะติดตั้งส่วนขยายเหล่านี้โดยอัตโนมัติเมื่อคุณแชร์การกำหนดค่าพื้นที่ทำงาน แนวทางนี้เหมาะสําหรับส่วนขยายเฉพาะโปรเจ็กต์ เช่น

    • ส่วนขยายภาษาการเขียนโปรแกรม รวมถึงโปรแกรมแก้ไขข้อบกพร่องเฉพาะภาษา
    • ส่วนขยายอย่างเป็นทางการสําหรับบริการระบบคลาวด์ที่ใช้ในโปรเจ็กต์
    • ตัวจัดรูปแบบโค้ด

สำหรับแนวทางหลัง คุณสามารถรวมส่วนขยาย IDE ไว้ในไฟล์ dev.nix โดยค้นหารหัสส่วนขยายแบบเต็มที่สมบูรณ์ (ในรูปแบบ <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

ปรับแต่งตัวอย่างเพลง

โปรดดูรายละเอียดเกี่ยวกับวิธีปรับแต่งตัวอย่างแอปในเอกสารประกอบสำหรับตัวอย่างแอป

ตั้งค่าไอคอนพื้นที่ทำงาน

คุณเลือกไอคอนที่กำหนดเองสำหรับพื้นที่ทำงานได้โดยวางไฟล์ PNG ที่มีชื่อว่า icon.png ข้างไฟล์ dev.nix ในไดเรกทอรี .idx จากนั้น IDX จะแสดงไอคอนนี้เพื่อแสดงพื้นที่ทํางานในหน้าแดชบอร์ด

เนื่องจากไฟล์นี้สามารถตรวจสอบได้ในระบบควบคุมแหล่งที่มา (เช่น Git) วิธีนี้จึงเป็นวิธีที่ช่วยให้ทุกคนที่ทำงานในโปรเจ็กต์เห็นไอคอนเดียวกันสำหรับโปรเจ็กต์ของคุณเมื่อใช้ IDX และเนื่องจากไฟล์อาจแตกต่างกันไปตามสาขา Git คุณจึงแยกความแตกต่างของพื้นที่ทำงานได้อย่างชัดเจนเมื่อทํางานกับรุ่น "เบต้า" และ "เวอร์ชันที่ใช้งานจริง" ของแอป เป็นต้น

เปลี่ยนการปรับแต่งเป็นเทมเพลต

หากต้องการเปลี่ยนการกำหนดค่าสภาพแวดล้อมเป็น "สภาพแวดล้อมเริ่มต้น" สำหรับผู้ที่ต้องการสร้างโปรเจ็กต์ใหม่ โปรดดูเอกสารการสร้างเทมเพลตที่กำหนดเอง

ดูตัวเลือกการปรับแต่งทั้งหมด

ดูรายละเอียดสคีมาการกําหนดค่าสภาพแวดล้อมได้ที่ข้อมูลอ้างอิง dev.nix