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

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

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

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

Nix และ Firebase Studio

Firebase Studio ใช้ Nix เพื่อกำหนด การกำหนดค่าสภาพแวดล้อมสำหรับพื้นที่ทำงานแต่ละแห่ง โดยเฉพาะอย่างยิ่ง Firebase Studio จะใช้สิ่งต่อไปนี้

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

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

เนื่องจากสภาพแวดล้อมของ Nix สามารถทำซ้ำได้และเป็นแบบประกาศ ในบริบทของ Firebase Studio หมายความว่าคุณสามารถแชร์ไฟล์การกำหนดค่า Nix เป็นส่วนหนึ่งของที่เก็บ Git เพื่อให้ทุกคนที่ทำงานในโปรเจ็กต์ มีการกำหนดค่าสภาพแวดล้อมเหมือนกัน

ตัวอย่างพื้นฐาน

ตัวอย่างต่อไปนี้แสดงการกำหนดค่าสภาพแวดล้อมพื้นฐานที่เปิดใช้ตัวอย่าง

{ pkgs, ... }: {

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

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

  # 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-24.11"; # or "unstable"

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

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

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

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

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

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

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

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

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

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

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

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

    • ธีมสีที่กำหนดเอง
    • การจำลองโปรแกรมแก้ไข เช่น VSCodeVim

  • เพิ่มส่วนขยายลงในไฟล์ 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"
  ];
  ...
}

เพิ่มบริการทั่วไป

Firebase Studio ยังมีการตั้งค่าและการกำหนดค่าที่ง่ายขึ้นสำหรับ บริการทั่วไปที่คุณอาจต้องใช้ในระหว่างการพัฒนา ซึ่งรวมถึงบริการต่อไปนี้

  • คอนเทนเนอร์
    • 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 ไว้ในไดเรกทอรี .idx ที่ระดับเดียวกับไฟล์ dev.nix Firebase Studio จะใช้ไอคอนนี้เพื่อแสดงพื้นที่ทำงานใน แดชบอร์ด

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

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

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

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

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

ดาวน์โหลดไฟล์

วิธีดาวน์โหลดไฟล์เป็นไฟล์ ZIP

  • คลิกขวาที่ไดเรกทอรีใดก็ได้ในบานหน้าต่าง Explorer แล้วเลือกบีบอัดและดาวน์โหลด

วิธีดาวน์โหลดทุกอย่างในไดเรกทอรีโปรเจ็กต์

  1. เลือก File > Open Folder

  2. ยอมรับไดเรกทอรี /home/user เริ่มต้น

  3. หลังจากโหลดไฟล์แล้ว ให้คลิกขวาที่ไดเรกทอรีการทำงาน แล้วเลือกบีบอัดและดาวน์โหลด หากใช้ App Prototyping agent ไดเรกทอรีการทำงานจะเป็น studio หากใช้เทมเพลตหรือโปรเจ็กต์ที่อัปโหลด ไดเรกทอรีการทำงานจะเป็นชื่อโปรเจ็กต์

  4. เมื่อได้รับข้อความแจ้งให้สร้างสภาพแวดล้อมใหม่ ให้คลิกยกเลิก

  5. หลังจากดาวน์โหลดเสร็จแล้ว ให้เปิดไดเรกทอรีการทำงานอีกครั้งจากเมนู File เพื่อกลับไปยังพื้นที่ทำงาน

ขั้นตอนถัดไป