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

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

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

ดูข้อมูลทั้งหมดได้ที่ข้อมูลอ้างอิง dev.nix ของสิ่งที่พร้อมใช้งาน

Nix และ IDX

IDX ใช้ Nix ในการกำหนด การกำหนดค่าสภาพแวดล้อม ของพื้นที่ทำงานแต่ละแห่งได้ โดย IDX ใช้สิ่งต่อไปนี้

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

  • เครื่องมือจัดการแพ็กเกจ Nix เพื่อจัดการ เครื่องมือระบบที่พร้อมใช้งานกับพื้นที่ทำงานของคุณ การดําเนินการนี้คล้ายกับระบบปฏิบัติการเฉพาะ ผู้จัดการแพ็กเกจ เช่น APT (apt และ apt-get), Homeบล็อก (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";
      };
    };
  };
}

เพิ่มเครื่องมือระบบ

เพื่อเพิ่มเครื่องมือระบบลงในพื้นที่ทำงานของคุณ เช่น คอมไพเลอร์หรือโปรแกรม CLI สำหรับ ระบบคลาวด์ ค้นหารหัสแพ็กเกจที่ไม่ซ้ำกันในแพ็กเกจ Nix รีจิสทรี แล้วเพิ่มลงในไฟล์ 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
  ];
  ...
}

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

ใช้ไบนารีของโหนดภายใน

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

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

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

การกำหนดค่าเริ่มต้นของ gcloud CLI สำหรับ Google ระบบคลาวด์พร้อมใช้งานสำหรับ IDX ทั้งหมด พื้นที่ทำงาน

หากต้องการคอมโพเนนต์เพิ่มเติม ก็เพิ่มไปที่ไฟล์ 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.*)
    • โพสต์เกรส (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

ดูรายละเอียดการเปิดใช้บริการเหล่านี้ในพื้นที่ทำงานได้ที่services.* ทั้งหมดของข้อมูลอ้างอิง dev.nix

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

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

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

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

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

เปลี่ยนการปรับแต่งของคุณให้เป็นเทมเพลต

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

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

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