התאמה אישית של סביבת העבודה של IDX

בעזרת Project IDX אפשר להתאים את סביבת העבודה לצרכים הייחודיים של הפרויקט על ידי הגדרת קובץ תצורה יחיד של .idx/dev.nix שמתאר:

  • את כלי המערכת שצריכים להיות מסוגלים להפעיל (לדוגמה, Terminal), כמו מהדרים או קבצים בינאריים אחרים.
  • התוספים בסביבת הפיתוח המשולבים (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";
      };
    };
  };
}

הוספת כלי מערכת

כדי להוסיף כלי מערכת לסביבת העבודה, כמו מהדרים או תוכנות 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), Homebrew (brew) ו-dpkg. תיאור מדויק של חבילות המערכת המשמעות היא שקל יותר לשתף ולשכפל סביבות עבודה של IDX.

שימוש בקבצים בינאריים של צמתים מקומיים

בדיוק כמו במחשב המקומי, קבצים בינאריים שקשורים לצומת שמותקן באופן מקומי ניתן להריץ חבילות (כלומר חבילות שהוגדרו ב-package.json) חלונית הטרמינל על ידי הפעלה שלה באמצעות npx הפקודה.

לנוחיותכם, אם אתם נמצאים בספרייה עם node_modules תיקייה (כמו תיקיית השורש של פרויקט אינטרנט), קבצים בינאריים שמותקנים באופן מקומי אפשר להפעיל אותו ישירות, בלי הקידומת npx.

הוספת gcloud רכיבים

הגדרת ברירת מחדל של ה-CLI gcloud ל-Google Cloud זמין לכל IDX בסביבות עבודה.

אם יש לך צורך ברכיבים נוספים, אפשר להוסיף אותם לקובץ dev.nix כמו כך:

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

הוספה של תוספי IDE

אפשר להתקין תוספים ב-IDX באמצעות במרשם התוספים של OpenVSX בשתי דרכים:

  • שימוש בחלונית תוספים ב-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 של הסכימה של תצורת הסביבה.