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 환경은 컨텍스트에서 재현 가능하고 선언적이기 때문에 즉, 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 패키지에서 고유한 패키지 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
  ];
  ...
}

이것은 일반적으로 Linux 커널을 사용하여 시스템 패키지를 설치하는 방법과 APT (apt 및 apt-get), Homebrew와 같은 OS별 패키지 관리자 (brew) 및 dpkg. 어떤 시스템 패키지가 정확히 어떤 시스템 패키지인지 선언적으로 설명 IDX 작업공간을 더 쉽게 공유하고 재현할 수 있습니다.

로컬 노드 바이너리 사용

로컬 머신에서와 마찬가지로 로컬에 설치된 노드와 관련된 바이너리는 패키지 (즉, package.json에 정의된 패키지)는 npx로 호출하여 터미널 패널 명령어를 참고하세요.

편의를 위해 node_modules가 있는 디렉터리에 있는 경우 폴더 (예: 웹 프로젝트의 루트 디렉터리), 로컬에 설치된 바이너리 npx 접두사 없이 직접 호출할 수 있습니다.

gcloud 구성요소 추가

Google용 gcloud CLI의 기본 구성 모든 IDX에서 Cloud를 사용할 수 있습니다 살펴보겠습니다

추가 구성요소가 필요한 경우 다음과 같이 dev.nix 파일에 추가하면 됩니다. 이렇게요.

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

IDE 확장 프로그램 추가

다음을 사용하여 IDX에 확장 프로그램을 설치할 수 있습니다. 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는 사용자가 필요로 하는 일반적인 서비스에 대해 간소화된 설정 및 구성을 제공합니다. 개발 중에 필요할 수 있는 항목:

  • 컨테이너 <ph type="x-smartling-placeholder">
      </ph>
    • Docker (services.docker.*)
  • 메시지 <ph type="x-smartling-placeholder">
      </ph>
    • Pub/Sub 에뮬레이터 (services.pubsub.*)
  • 데이터베이스 <ph type="x-smartling-placeholder">
      </ph>
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

작업공간에서 이러한 서비스를 사용 설정하는 방법에 대한 자세한 내용은 services.*를 참고하세요. dev.nix 참조의 일부

미리보기 맞춤설정

앱 미리보기를 맞춤설정하는 방법에 대한 자세한 내용은 미리보기를 참조하세요.

작업공간 아이콘 설정

이라는 이름의 PNG 파일을 배치하여 작업공간의 맞춤 아이콘을 선택할 수 있습니다. .idx 디렉터리 내의 dev.nix 파일 옆에 있는 icon.png IDX 이 아이콘을 사용하여 대시보드에서 작업공간을 나타냅니다.

이 파일은 Git과 같은 소스 제어에 체크인할 수 있기 때문에 프로젝트에서 작업하는 모든 사용자에게 프로젝트 IDX를 사용할 때 이를 고려해야 합니다 파일이 Git 브랜치에 따라 다를 수 있기 때문에 '베타'에서 작업할 때 작업공간을 시각적으로 구별할 수도 있습니다. 및 '프로덕션' 앱 버전을 예로 들 수 있습니다

맞춤설정을 템플릿으로 변환

환경 구성을 '시작 환경'으로 전환하려면 다음 단계를 따르세요. 모든 사용자 커스텀 코드 생성에 대한 문서를 참조하세요. 템플릿을 참고하세요.

모든 맞춤설정 옵션 보기

자세한 내용은 dev.nix 참조를 확인하세요. 환경 구성 스키마의 설명입니다.