VSCode 확장 빌드: 4부

이 확장 기능을 만드는 가장 중요한 것 중 하나는 React.js 앱이 확장 프레임워크와 통신하도록 하는 가장 좋은 방법을 찾는 것입니다. 문서를 읽고 놀아본 결과 VS Codes 메시지 API를 사용하면 상당히 간단했습니다.

VS Code의 API로 메시지 전달

VS Code는 JavaScript 내에서 acquireVsCodeApi를 호출하여 webview 내에서 특별한 API 개체를 제공합니다. API 개체에는 확장의 백엔드로 메시지를 다시 보내는 데 사용할 수 있는 postMessage() 함수가 있습니다. panel.webview.onDidReceiveMessage() 함수를 사용하여 백엔드에서 메시지를 구독할 수 있습니다.

Webview App.tsx에 스크립트가 로드되었을 때 메시지를 보내는 예

// Add typedef for acquireVsCodeApi
declare const acquireVsCodeApi: Function;
// Fetch the api object
export const vscodeApi = acquireVsCodeApi();
vscodeApi.postMessage('React App Loaded')

그런 다음 다음을 사용하여 확장 프로그램이 메시지를 포착했는지 확인할 수 있습니다.

panel.webview.onDidReceiveMessage((message) => console.log('MESSAGE', message))

이제 VS Code 백엔드로 메시지를 보낼 수 있으므로 메시지를 웹뷰로 다시 보내고 이를 포착하는 방법을 알아내야 합니다. webview에서 메시지를 보낸 방식과 유사한 panel.webview.postMessage() 함수를 사용하여 쉽게 메시지를 보낼 수 있습니다. VSCodeAPI를 사용하여 webview에서 메시지를 포착하는 대신 실제로 message 에 대한 창 개체에 이벤트 리스너를 추가합니다.

반응 앱이 로드된 후 VS Code 백엔드에서 메시지 보내기:

panel.webview.onDidReceiveMessage((message) => {
    if (message === 'React App Loaded') {
        panel.webview.postMessage('Extension Knows React is ready');
    }
})

App.tsx의 VS Code 백엔드에서 메시지를 수신하는 Webview:

window.addEventListener('message', (message) => console.log('CAUGHT THE MESSAGE', message));

이제 포착된 메시지와 함께 console.log()가 표시되어야 합니다.

React 코드 정리

VS Code API를 래핑하는 lib 서비스를 만들기로 결정했습니다. API에 더 많은 유형 검사를 추가하고 eventListeners 의 정리를 단순화할 수 있습니다.

declare const acquireVsCodeApi: Function;

interface VSCodeApi {
    getState: () => any;
    setState: (newState: any) => any;
    postMessage: (message: any) => void;
}

class VSCodeWrapper {
    private readonly vscodeApi: VSCodeApi = acquireVsCodeApi();

    /**
     * Send message to the extension framework.
     * @param message
     */
    public postMessage(message: any): void {
        this.vscodeApi.postMessage(message);
    }

    /**
     * Add listener for messages from extension framework.
     * @param callback called when the extension sends a message
     * @returns function to clean up the message eventListener.
     */
    public onMessage(callback: (message: any) => void): () => void {
        window.addEventListener('message', callback);
        return () => window.removeEventListener('message', callback);
    }
}

// Singleton to prevent multiple fetches of VsCodeAPI.
export const VSCodeAPI: VSCodeWrapper = new VSCodeWrapper();

이제 내 App.tsx 내부에서 useEffect를 사용하여 메시지를 구독할 수 있습니다.

import React, { useEffect } from 'react';
import './App.css';

import { VSCodeAPI } from './lib/VSCodeAPI';

export default function App() {
    useEffect(() => {
        return VSCodeAPI.onMessage((message) => console.log('app', message));
    });
    return (
        <h1>Hello World</h1>
    );
}

다음 단계

이제 뷰와 백엔드 간에 데이터를 전달할 수 있으므로 실제 기능 작업을 시작할 수 있습니다. todo.md 파일을 생성하고 수정하기 위해 사용자 지정 편집기를 만드는 방법에 대한 VS Code 설명서를 살펴봐야 합니다. 스타일을 위한 프런트 엔드에 Tailwind CSS를 추가하고 할 일을 표시하고 제출하기 위한 보기를 만들고 싶습니다.