728x90
▶ package.json
▶ extension.ts
더보기
extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "catCoding" is now active!');
context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
vscode.window.showInformationMessage('I am coding, meow~');
CatCodingPanel.createOrShow(context.extensionUri);
}));
}
class CatCodingPanel {
public static currentPanel: CatCodingPanel | undefined;
public static readonly viewType = 'catCoding';
public static readonly catName = 'catCoding';
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionUri: vscode.Uri;
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
this._panel = panel;
this._extensionUri = extensionUri;
this._panel.title = CatCodingPanel.catName;
this._panel.webview.html = this._getHtmlForWebview(panel.webview, 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif');
}
public static createOrShow(extensionUri: vscode.Uri) {
const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
const panel = vscode.window.createWebviewPanel(
CatCodingPanel.viewType,
CatCodingPanel.catName,
column || vscode.ViewColumn.One,
{
enableScripts: true,
localResourceRoots: [extensionUri],
}
);
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionUri);
}
private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cat Coding</title>
</head>
<body>
<img src="${catGifPath}" width="300" />
<h1>I'm busy</h1>
</body>
</html>`;
}
}참고 사이트 : https://github.com/microsoft/vscode-extension-samples/tree/main/webview-sample
GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
Sample code illustrating the VS Code extension API. - GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
github.com
728x90
'IT > TOY Project' 카테고리의 다른 글
| [TOY] React+Spring+DB 연결해서 사용하기 (0) | 2023.01.13 |
|---|---|
| [TOY] VScode Extension 만들기(3) - Extension Manifest (0) | 2022.06.21 |
| [TOY] VScode Extension 만들기(2) - 메시지 변경 (0) | 2022.06.21 |
| [TOY] VScode Extension 만들기(1) - 환경 세팅 및 프로젝트 생성 (0) | 2022.06.21 |