DBChat용 VSCode 확장 UI 시작(7부)

이 튜토리얼에서는 데이터베이스와 상호작용하기 위해 AI 채팅을 사용하는 VSCode 확장 프로그램인 DBChat의 개발을 계속합니다. 이전 부분에서는 REPL 설정, 데이터베이스 연결 및 LSP 통합을 다루었습니다. 이번 편에서는 데이터베이스 연결 관리를 위해 VSCode 내에서 사용자 인터페이스(UI)를 만드는 데 중점을 둡니다.

목표는 데이터베이스 탐색을 위한 채팅 보기를 시작하는 왼쪽 사이드바 버튼을 추가하는 것입니다. 커서가 오른쪽 사이드바를 차지하므로 DBChat은 왼쪽에 위치합니다. 채팅 보기에는 ~/.dbchat.toml 구성 파일(4부에서 소개)을 통해 관리되는 데이터베이스 연결이 필요합니다. 이 부분에서는 이 파일을 편집하기 위한 UI를 구축합니다.

UI는 다음으로 구성됩니다.

1. 기존 데이터베이스 연결 목록
2. 새 연결을 추가하는 " " 버튼으로 "연결 추가" 양식을 엽니다.

업데이트된 package.json에는 필요한 구성 요소가 등록되어 있습니다.

1. viewsContainers: 액티비티 바의 사이드바 버튼을 정의합니다.
2. views: 버튼과 관련된 패널(웹뷰)을 정의합니다.
3. menus: 패널의 제목 표시줄에 " " 버튼을 추가합니다.

<code class="language-json">{
  "name": "dbchat",
  "displayName": "DBChat",
  "description": "Explore and Evolve Databases With Simple AI Chat",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.96.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:dbchat.ping",
    "onView:dbchat.chatPanel"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "dbchat.ping",
        "title": "DBChat: Ping"
      },
      {
        "command": "dbchat.addConnection",
        "title": "Add Database Connection",
        "icon": "$(add)"
      }
    ],
    "viewsContainers": {
      "activitybar": [
        {
          "id": "dbchat-sidebar",
          "title": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "views": {
      "dbchat-sidebar": [
        {
          "type": "webview",
          "id": "dbchat.chatPanel",
          "name": "DB Chat",
          "icon": "resources/database.svg"
        }
      ]
    },
    "menus": {
      "view/title": [
        {
          "command": "dbchat.addConnection",
          "when": "view == dbchat.chatPanel",
          "group": "navigation"
        }
      ]
    }
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "npm run check-types && npm run lint && node esbuild.js",
    "watch": "npm-run-all -p watch:*",
    "watch:esbuild": "node esbuild.js --watch",
    "watch:tsc": "tsc --noEmit --watch --project tsconfig.json",
    "package": "npm run check-types && npm run lint && node esbuild.js --production",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "check-types": "tsc --noEmit",
    "lint": "eslint src",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.96.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "@typescript-eslint/eslint-plugin": "^8.17.0",
    "@typescript-eslint/parser": "^8.17.0",
    "eslint": "^9.16.0",
    "esbuild": "^0.24.0",
    "npm-run-all": "^4.1.5",
    "typescript": "^5.7.2",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}</code>

확장 프로그램의 프런트엔드(HTML, CSS 및 JavaScript)는 빈 기본 보기, 연결 양식 및 두 보기를 표시하는 전환기로 구성됩니다. 코드는 VSCode API를 사용하여 확장 프로그램과 WebView 간의 통신을 처리합니다. DBChatPanel 클래스는 뷰를 관리하고 VSCode API와 상호 작용합니다. 현재 _saveConnection 함수는 자리 표시자입니다.

간단한 데모 이미지는 초기 UI를 보여줍니다. 향후 단계에는 연결 UI를 동적으로 만들고 ~/.dbchat.toml 업데이트하며 LSP 백엔드를 통해 채팅 쿼리를 라우팅하는 작업이 포함됩니다.

업데이트를 받으려면 @shrsv23을 팔로우하세요.

위 내용은 DBChat용 VSCode 확장 UI 시작(7부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!