Azure Data Studio 마법사 확장 만들기

  • 아티클

이 자습서에서는 새 Azure Data Studio 마법사 확장을 만드는 방법을 보여 줍니다. 확장은 Azure Data Studio에서 사용자와 상호 작용하는 마법사에 기여합니다.

이 문서에서는 다음 방법을 알아봅니다.

  • 확장 생성기 설치
  • 확장 만들기
  • 확장에 사용자 지정 마법사 추가
  • 확장 테스트
  • 확장 패키지
  • Marketplace에 확장 게시

필수 조건

Azure Data Studio는 Visual Studio Code와 동일한 프레임워크를 기준으로 하므로 Azure Data Studio 확장은 Visual Studio Code를 사용하여 빌드됩니다. 시작하려면 다음 구성 요소가 필요합니다.

  • $PATH에서 설치되고 사용할 수 있는 Node.js. Node.js에는 확장 생성기를 설치하는 데 사용되는 Node.js 패키지 관리자인 npm이 포함되어 있습니다.
  • 확장을 디버그하기 위한 Visual Studio Code
  • Azure Data Studio 디버그 확장 (선택 사항). 이렇게 하면 Azure Data Studio에 패키지하고 설치할 필요 없이 확장을 테스트할 수 있습니다.
  • 경로에 있는지 확인 azuredatastudio 합니다. Windows의 경우 setup.exe에서 옵션을 선택 Add to Path 해야 합니다. Mac 또는 Linux의 경우 Azure Data Studio의 명령 팔레트에서 Install 'azuredatastudio' command in PATH를 실행합니다.

확장 생성기 설치

확장을 만드는 프로세스를 간소화하기 위해 Yeoman을 사용하여 확장 생성기를 빌드했습니다. 설치하려면 명령 프롬프트에서 다음을 실행합니다.

npm install -g yo generator-azuredatastudio

마법사 확장 만들기

마법사 소개

마법사는 작업을 수행하기 위해 사용자가 입력할 단계별 페이지를 제공하는 사용자 인터페이스 형식입니다. 일반적인 예로는 소프트웨어 설치 마법사 및 문제 해결 마법사가 있습니다. 예시:

Dacpac wizard

마법사는 데이터를 사용하고 Azure Data Studio의 기능을 확장할 때 도움이 되는 경우가 많기 때문에 Azure Data Studio는 사용자 지정 마법사를 만드는 API를 제공합니다. 마법사 템플릿을 생성하고 수정하여 사용자 지정 마법사를 만드는 방법을 살펴보겠습니다.

확장 생성기 실행

확장을 만들려면

  1. 다음 명령을 사용하여 확장 생성기를 시작합니다.

    yo azuredatastudio

  2. 확장 유형 목록에서 새 마법사 또는 대화 상자를 선택합니다. 그런 다음 마법사를 선택한 다음, 시작 템플릿을 선택합니다.

  3. 단계에 따라 확장 이름(이 자습서의 경우 내 테스트 확장 사용)을 입력하고 설명을 추가합니다.

    Extension generator

이전 단계를 완료하면 새 폴더가 만들어집니다. Visual Studio Code에서 폴더를 열고 사용자 고유의 마법사 확장을 만들 준비가 되었습니다.

확장 실행

확장을 실행하여 마법사 템플릿이 제공하는 내용을 살펴보겠습니다. 실행하기 전에 Azure Data Studio 디버그 확장이 Visual Studio Code에 설치되어 있는지 확인합니다.

VS Code에서 F5를 선택하여 확장이 실행되는 디버그 모드에서 Azure Data Studio를 시작합니다. 그런 다음, Azure Data Studio의 새 창에 있는 명령 팔레트(Ctr+Shift+P)에서 마법사 시작 명령을 실행합니다. 그러면 이 확장에서 기여하는 기본 마법사가 시작됩니다.

Wizard template

다음으로 이 기본 마법사를 수정하는 방법을 살펴보겠습니다.

마법사 개발

확장 개발을 시작하는 데 가장 중요한 파일은 다음과 src/main.tsvsc-extension-quickstart.md같습니다package.json.

  • package.json: 시작 마법사 명령이 등록된 매니페스트 파일입니다. main.ts가 기본 프로그램 진입점으로 선언되는 파일이기도 합니다.
  • main.ts: 페이지, 텍스트 및 단추와 같은 UI 요소를 마법사에 추가하는 코드를 포함합니다.
  • vsc-extension-quickstart.md: 개발할 때 유용한 참조가 될 수 있는 기술 설명서를 포함합니다.

네 번째 빈 페이지를 추가하여 마법사를 변경해 보겠습니다. 아래와 같이 수정 src/main.ts 하면 마법사를 시작할 때 추가 페이지가 표시됩니다.

Wizard main 템플릿에 익숙해지면 다음과 같은 몇 가지 추가 아이디어를 시도해 볼 수 있습니다.

  • 새 페이지에 너비가 300인 단추 추가
  • 단추를 넣을 flex 구성 요소 추가
  • 단추에 작업 추가. 예를 들어 단추를 클릭하면 파일 열기 대화 상자를 시작하거나 쿼리 편집기를 엽니다.

확장 패키지

다른 사용자와 공유하려면 확장명을 단일 파일로 패키지해야 합니다. Azure Data Studio 확장 마켓플레이스에 게시하거나 팀 또는 커뮤니티 간에 공유할 수 있습니다. 이렇게 하려면 명령줄에서 다른 npm 패키지를 설치해야 합니다.

npm install -g vsce

원하는 대로 README.md를 편집하고 확장의 기본 디렉터리로 이동한 다음, vsce package를 실행합니다. 필요에 따라 리포지토리를 확장에 연결하거나 리포지토리 없이 계속할 수 있습니다. 파일을 추가하려면 파일에 비슷한 줄을 추가합니다 package.json .

"repository": {
    "type": "git",
    "url": "https://github.com/anjalia/my-test-extension.git"
}

이러한 줄이 추가된 후에는 my-test-extension-0.0.1.vsix 파일이 생성되었고, 이 파일을 Azure Data Studio에 설치할 준비가 되었습니다.

Install VSIX

Marketplace에 확장 게시

Azure Data Studio 확장 마켓플레이스는 아직 완전히 구현되지 않았지만 현재 프로세스는 확장 VSIX(예: GitHub 릴리스 페이지)를 호스트한 다음 확장 정보를 사용하여 이 JSON 파일을 업데이트하는 PR을 제출하는 것입니다.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

  • 확장 생성기 설치
  • 확장 만들기
  • 확장에 사용자 지정 마법사 추가
  • 확장 테스트
  • 확장 패키지
  • Marketplace에 확장 게시

이 내용을 읽은 후 Azure Data Studio에 대한 고유한 확장을 빌드하도록 영감을 받을 수 있기를 바랍니다. 대시보드 인사이트(SQL Server에 대해 실행되는 예쁜 그래프), 여러 SQL 관련 API 및 Visual Studio Code에서 상속된 거대한 기존 확장 지점 집합을 지원합니다.

아이디어가 있지만 시작하는 방법을 잘 모르는 경우 팀에서 azuredatastudio와 같은 문제를 열거나 트윗하세요.

모든 기존 API 및 패턴을 다루므로 항상 Visual Studio Code 확장 가이드를 참조할 수 있습니다.

Azure Data Studio에서 T-SQL을 사용하는 방법을 알아보려면 T-SQL 편집기 자습서를 완료합니다.

Transact-SQL 편집기를 사용하여 데이터베이스 개체 만들기