VSCode 확장에서 TOML 구성 관리 - DBChat Part 8-JS 튜토리얼-php.cn

Hexmos의 창립자인 Shrijith Venkatrama는 단 몇 분 만에 코드에서 훌륭한 API 문서를 생성하여 엔지니어링 워크플로를 간소화하는 매우 편리한 도구인 LiveAPI를 구축하고 있습니다.

이 튜토리얼 시리즈에서는 AI 채팅을 사용하여 데이터베이스를 탐색하고 개선하기 위한 간단한 도구인 DBChat을 직접 구축합니다.

자세한 내용은 이전 기사를 참조하세요.

DBChat 구축 - 간단한 채팅으로 데이터베이스 탐색 및 개선(1부)
DBChat: Golang에서 장난감 REPL 출시(2부)
DBChat 파트 3 - 데이터베이스 구성, 연결 및 덤프
DBChat 및 Gemini를 사용하여 데이터베이스와 채팅(4부)
언어 서버 프로토콜 - DBChat 구축(5부)
DBChat VSCode 확장 만들기 - LSP 백엔드와 핑퐁 상호 작용(6부)
DBChat용 VSCode 확장 UI 실행(7부)

VSCode 확장에서 DBChat용 TOML 연결 관리자 UI 구축

이전 기사에서는 DBChat VSCode 확장 프로그램에서 간단한 채팅 UI 및 데이터베이스 연결 양식을 위한 프레임워크를 만들었습니다.

이 게시물에서는 DBChat 확장 프로그램이 ~/.dbchat.toml 구성 파일의 [connections] 섹션을 조작하여 항목을 추가/업데이트/삭제하는 방법을 보여 드리겠습니다.

메모리를 새로 고치려면 구성 파일의 구조가 다음과 같아야 합니다.

<code># DBChat 示例配置文件
# 将此文件复制到 ~/.dbchat.toml 并根据需要修改

[connections]
# 格式：name = "connection_string"
local = "postgresql://postgres:postgres@localhost:5432/postgres"
liveapi = "postgresql://user:pwd@ip:5432/db_name" 

[llm]
gemini_key = "the_key"</code>

로그인 후 복사

결과

DBChat 연결 목록:

Manage TOML Configuration From VSCode Extension - DBChat Part 8

DBChat 연결 추가/수정:

Manage TOML Configuration From VSCode Extension - DBChat Part 8

수정 및 업데이트의 경우 오류 방지를 위해 확인 메시지도 표시됩니다.

연결 생성 요청 처리

먼저 toml 확장 프로그램을 설치합니다.

<code> npm install @iarna/toml</code>

로그인 후 복사

새로운 수입품이 생겼습니다:

<code>import * as fs from 'fs/promises';
import * as path from 'path';
import * as os from 'os';
import * as TOML from '@iarna/toml';</code>

로그인 후 복사

키 구조는 세 가지 작업 모두에 대한 이벤트를 수신하는 메시지 핸들러입니다.

<code>        const messageHandler = this._view.webview.onDidReceiveMessage(
            async (message) => {
                console.log('Received message:', message);
                switch (message.command) {
                    case 'saveConnection':
                        console.log('Processing saveConnection command');
                        const success = await this._saveConnection(message.name, message.connectionString);
                        if (success) {
                            console.log('Connection saved successfully, closing form');
                            this._showingConnectionForm = false;
                            this._updateView();
                        } else {
                            console.log('Connection not saved, keeping form open');
                        }
                        break;
                    case 'cancel':
                        console.log('Processing cancel command');
                        this._showingConnectionForm = false;
                        this._updateView();
                        break;
                    case 'editConnection':
                        this._showingConnectionForm = true;
                        this._editingConnection = message.name;
                        // First update the view to show the form
                        await this._updateView();
                        // Then send the prefill message after a short delay to ensure the form exists
                        setTimeout(() => {
                            this._view.webview.postMessage({ 
                                command: 'prefillForm', 
                                name: message.name, 
                                connectionString: message.connectionString 
                            });
                        }, 100);
                        break;
                    case 'deleteConnection':
                        const choice = await vscode.window.showWarningMessage(
                            `Are you sure you want to delete connection "${message.name}"?`,
                            'Yes',
                            'No'
                        );
                        if (choice === 'Yes') {
                            const deleted = await this._deleteConnection(message.name);
                            if (deleted) {
                                await this._updateView();  // Update view after successful deletion
                                vscode.window.showInformationMessage(`Connection "${message.name}" deleted successfully.`);
                            }
                        }
                        break;
                }
            }
        );

        // Add message handler to subscriptions for cleanup
        context.subscriptions.push(messageHandler);</code>

로그인 후 복사

연결을 저장하는 것은 쉽습니다.

<code>    private async _saveConnection(name: string, connectionString: string): Promise<boolean> {
        console.log('Starting _saveConnection with:', { name, connectionString });
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            console.log('Config path:', configPath);

            let config: any = {
                connections: {},
                llm: {}
            };
            console.log('Initial config structure:', config);

            // Read existing config if it exists
            try {
                console.log('Attempting to read existing config file...');
                const fileContent = await fs.readFile(configPath, 'utf-8');
                console.log('Existing file content:', fileContent);

                console.log('Parsing TOML content...');
                config = TOML.parse(fileContent);
                console.log('Parsed config:', config);

                // Ensure connections section exists
                config.connections = config.connections || {};
                console.log('Config after ensuring connections exist:', config);
            } catch (error: any) {
                console.log('Error reading config:', error);
                if (error.code !== 'ENOENT') {
                    console.error('Unexpected error reading config:', error);
                    throw error;
                }
                console.log('Config file does not exist, will create new one');
            }

            // Check if connection already exists
            if (config.connections[name]) {
                console.log(`Connection "${name}" already exists, showing confirmation dialog`);
                const choice = await vscode.window.showWarningMessage(
                    `Connection "${name}" already exists. Do you want to overwrite it?`,
                    'Yes',
                    'No'
                );
                console.log('User choice for overwrite:', choice);

                if (choice !== 'Yes') {
                    console.log('User declined to overwrite, returning false');
                    return false;
                }
            }

            // Update the connection
            config.connections[name] = connectionString;
            console.log('Updated config:', config);

            // Convert config to TOML and write back to file
            console.log('Converting config to TOML...');
            const tomlContent = TOML.stringify(config);
            console.log('Generated TOML content:', tomlContent);

            // Preserve the header comments
            const finalContent = `# DBChat Sample Configuration File
# Copy this file to ~/.dbchat.toml and modify as needed

${tomlContent}`;
            console.log('Final content to write:', finalContent);

            console.log('Writing to file...');
            await fs.writeFile(configPath, finalContent, 'utf-8');
            console.log('File written successfully');

            // Update view immediately after successful file write
            this._showingConnectionForm = false;
            console.log('Form hidden, updating view');
            this._updateView();

            await vscode.window.showInformationMessage(`Connection "${name}" saved successfully!`, { modal: false });
            return true;
        } catch (error) {
            console.error('Error in _saveConnection:', error);
            if (error instanceof Error) {
                console.error('Error stack:', error.stack);
            }
            await vscode.window.showErrorMessage(`Failed to save connection: ${error}`);
            return false;
        }
    }
</boolean></code>

로그인 후 복사

연결 목록

<code>    private async _getConnections(): Promise {
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            const fileContent = await fs.readFile(configPath, 'utf-8');
            const config = TOML.parse(fileContent);
            return config.connections || {};
        } catch (error) {
            console.error('Error reading connections:', error);
            return {};
        }
    }</code>

로그인 후 복사

연결 삭제

<code>    private async _deleteConnection(name: string): Promise<boolean> {
        try {
            const configPath = path.join(os.homedir(), 'dbchat.toml');
            const fileContent = await fs.readFile(configPath, 'utf-8');
            const config = TOML.parse(fileContent);

            if (!config.connections || !config.connections[name]) {
                await vscode.window.showErrorMessage(`Connection "${name}" not found.`);
                return false;
            }

            delete config.connections[name];

            const tomlContent = TOML.stringify(config);
            const finalContent = `# DBChat Sample Configuration File
# Copy this file to ~/.dbchat.toml and modify as needed

${tomlContent}`;

            await fs.writeFile(configPath, finalContent, 'utf-8');
            // Show message after file operations are complete
            vscode.window.showInformationMessage(`Connection "${name}" deleted successfully.`);
            return true;
        } catch (error) {
            console.error('Error deleting connection:', error);
            vscode.window.showErrorMessage(`Failed to delete connection: ${error}`);
            return false;
        }
    }
</boolean></code>

로그인 후 복사

이번 포스팅은 여기까지입니다. 이 구조를 통해 기본 데이터베이스 연결 목록, 추가, 삭제 및 업데이트 작업을 구현합니다.