템플릿은 공개 GitHub 저장소 (또는 저장소의 폴더나 브랜치)입니다.
다음과 같습니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
맞춤 템플릿에서 새 작업공간 만들기
idx-template.json에는 다음과 같은 템플릿의 메타데이터가 포함됩니다.
사용자가 볼 수 있는 이름, 설명 및 매개변수를 사용하여
템플릿을 구성합니다. 예를 들어 사용자가 다음 중에서 선택하도록 허용할 수 있습니다.
다양한 프로그래밍 언어 또는 사용 사례 예시를 포함할 수 있습니다. IDX 사용
사용자가 광고를 만들기로 선택할 때 표시되는 UI를 준비하기 위해 이 정보를
새 작업공간을 만들 수 있습니다
.idx/dev.nix 파일을 만들어 환경 설정 참고:
flutter create와 같은 프로젝트 스캐폴딩 도구를 실행하거나
npm init 명령어를 사용하여 Go, Python으로 작성된 커스텀 스크립트를
Node.js 또는 다른 언어로 제공됩니다.
이 파일은 사용자가 지정한 매개변수로 실행됩니다.
확인할 수 있습니다
다른 파일은 이 두 파일과 함께 포함될 수 있으며,
idx-template.nix: 템플릿을 인스턴스화합니다. 예를 들어
최종 .idx/dev.nix 파일을 포함하거나 모든 스캐폴딩을 포함합니다.
파일을 찾을 수 있습니다
기본 예: 공개 GitHub 저장소를 템플릿으로 변환
idx-template.json 및
idx-template.nix의 경우 다음과 같은 기본 템플릿 예를 확인하면 유용합니다.
사용자가 구성할 수 있는 매개변수가 없음
템플릿 저장소의 모든 파일만 복사합니다 (두 개의 파일 제외).
idx-template 파일)을 사용자의 작업공간에 업로드합니다. 이미
환경을 정의하는 dev.nix 파일이 있는 .idx 하위 폴더
공개 GitHub 저장소 (또는 하위 폴더 또는
브랜치)가 해당 저장소를 IDX 템플릿으로 효과적으로 변환합니다.
idx-template.json
{
"name": "Hello world",
"description": "A template for a CLI program that prints 'hello world'",
"icon": "https://www.gstatic.com/images/branding/productlogos/idx/v1/192px.svg",
"params": []
}
idx-template.nix
# No user-configurable parameters
{ pkgs, ... }: {
# Shell script that produces the final environment
bootstrap = ''
# Copy the folder containing the `idx-template` files to the final
# project folder for the new workspace. ${./.} inserts the directory
# of the checked-out Git folder containing this template.
cp -rf ${./.} "$out"
# Set some permissions
chmod -R +w "$out"
# Remove the template files themselves and any connection to the template's
# Git repository
rm -rf "$out/.git" "$out/idx-template".{nix,json}
'';
}
bootstrap 스크립트에서 추가 시스템 패키지 사용
앞의 예는 기본 POSIX 명령만 사용하여 파일을 오른쪽으로 복사
있습니다. 템플릿의 bootstrap 스크립트에 추가 바이너리가 필요할 수 있습니다.
git, node, python3 등이 설치되어 있습니다.
다음을 수행하여 부트스트랩 스크립트에 추가 시스템 패키지를 제공할 수 있습니다.
다음과 같이 idx-template.nix 파일에 packages를 지정합니다.
추가 시스템 패키지로 작업공간 맞춤설정dev.nix 파일의 packages에 추가하면 됩니다.
다음은 node와 같은 바이너리가 포함된 pkgs.nodejs를 추가하는 예입니다.
npx 및 npm:
# idx-template.nix
{pkgs}: {
packages = [
# Enable "node", "npm" and "npx" in the bootstrap script below.
# Note, this is NOT the list of packages available to the workspace once
# it's created. Those go in .idx/dev.nix
pkgs.nodejs
];
bootstrap = ''
mkdir "$out"
# We can now use "npm"
npm init --yes my-boot-strap@latest "$out"
''
}
사용자가 구성할 수 있는 매개변수 추가
사용자가 새 프로젝트의 시작점을 맞춤설정할 수 있도록 하려면 다음 안내를 따르세요.
여러 템플릿을 만들거나 매개변수를 사용하여 단일 템플릿을 만들 수 있습니다.
이 옵션은 시작 지점이 서로 다른 경우에 적합합니다.
CLI 도구에 전달된 값 (예: --language=js 대
--language=ts).
매개변수를 추가하는 방법은 다음과 같습니다.
idx-template.json의 params 객체에서 매개변수를 설명합니다.
메타데이터 파일로 변환할 수 있습니다. IDX는 이 파일의 정보를 사용하여 UI를 준비합니다.
사용자에게 표시되는 (예: 체크박스, 드롭다운, 텍스트 입력란)
있습니다.
사용자가 선택한 값을 사용하도록 idx-template.nix 부트스트랩을 업데이트하세요.
지정할 수 있습니다.
idx-template.json의 매개변수 설명
다음은 enum 매개변수를 추가하는 예입니다. IDX는
드롭다운 메뉴나 라디오 버튼 그룹을 변경할 수 있습니다.
두 개의 값 (JavaScript와 TypeScript)이 있기 때문에 UI는
두 옵션의 라디오 버튼 그룹을 선택하고 ts 또는 js 값을
idx-template.nix 스크립트
각 매개변수 객체에는 다음과 같은 속성이 있습니다.
속성
유형
설명
id
string
변수 이름과 비슷한 매개변수의 고유 ID입니다.
이름
string
이 매개변수의 표시 이름입니다.
유형
string
이 매개변수에 사용할 UI 구성요소와 부트스트랩 스크립트에 전달할 데이터 유형을 지정합니다. 유효한 값은 다음과 같습니다.
"enum" - 드롭다운 또는 라디오 버튼 그룹을 표시하고 string를 부트스트랩에 전달합니다.
"boolean": 체크박스를 표시하고 true 또는 false를 전달합니다.
"text": 텍스트 필드를 표시하고 string를 전달합니다.
옵션
object
enum 매개변수의 경우 사용자를 표시하는 옵션을 나타냅니다. 예를 들어 옵션이 {"js": "JavaScript", ...}인 경우 'JavaScript' 가 옵션으로 표시되며 선택 시 이 매개변수의 값은 js이 됩니다.
기본값
string 또는 boolean
UI에서 초깃값을 설정합니다. enum 매개변수의 경우 options의 키 중 하나여야 합니다. boolean 매개변수의 경우 true 또는 false이어야 합니다.
필수
boolean
이 매개변수가 필수임을 나타냅니다.
idx-template.nix에서 매개변수 값 사용
idx-template.json 파일에서 params 객체를 정의한 후에는 다음을 수행할 수 있습니다.
사용자가 입력한 매개변수 값을 기반으로 부트스트랩 스크립트를
선택할 수 있습니다
이전 섹션의 예를 따라
ID가 language이며 가능한 값이 ts 또는 js인 enum이면
다음과 같습니다.
# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
packages = [
pkgs.nodejs
];
bootstrap = ''
# We use Nix string interpolation to pass the user's chosen programming
# language to our script.
npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
''
}
또 다른 일반적인 패턴은
문자열의 값입니다. 이전 예를 작성하는 또 다른 방법은 다음과 같습니다.
npm init --yes my-boot-strap@latest "$out" -- \
${if language == "ts" then "--lang=ts" else "--lang=js" }
기본적으로 열 파일을 선택하세요.
새 파일을 생성할 때 편집하기 위해 열 파일을 맞춤설정하는 것이 좋습니다
만든 작업공간이 있습니다 예를 들어, 템플릿이
기본 HTML, 자바스크립트 및 CSS 파일을 여는 것이 좋습니다.
기본적으로 열 파일을 맞춤설정하려면 .idx/dev.nix 파일을 업데이트하세요.
(idx-template.nix 파일이 아님)을 사용하여 onCreate 작업공간 후크를 포함해야 합니다.
다음과 같이 openFiles 속성을 사용합니다.
# .idx/dev.nix
{pkgs}: {
...
idx = {
# Workspace lifecycle hooks
workspace = {
# Runs when a workspace is first created with this `dev.nix` file
onCreate = {
# Open editors for the following files by default, if they exist.
# The last file in the list will be focused.
default.openFiles = [
"src/index.css"
"src/index.js"
"src/index.html"
];
# Include other scripts here, as needed, for example:
# installDependencies = "npm install";
};
# To run something each time the workspace is (re)started, use the `onStart` hook
};
# Enable previews and customize configuration
previews = { ... };
};
}
기본 작업공간 아이콘 선택
템플릿으로 만든 작업공간에 대한 기본 아이콘을 선택할 수 있습니다.
icon.png라는 PNG 파일을 dev.nix 파일 옆에 배치하여
.idx 디렉터리에 있습니다.
템플릿에서 새 작업공간 만들기
템플릿을 엔드 투 엔드로 테스트하는 가장 간단한 방법은 새 작업공간을 만드는 것입니다.
사용할 수 있습니다. 다음 링크로 이동하여 예제를 템플릿의
GitHub 저장소 URL:
<ph type="x-smartling-placeholder">