个人中心
gpt4 book ai didi

visual-studio-code - 在 Visual Studio Code 扩展开发中使用 HTML 文件

转载 作者：行者123 更新时间：2023-12-05 08:26:46 24 4
gpt4 key购买 nike

我想知道是否可以在单独的文件中使用 HTML、CSS 和 JavaScript 在 Visual Studio Code 中创建扩展。

我正在使用 VS Code Webview API。我试图创建一个文件夹并放置我的 HTML 和 CSS 文件，但它没有用。我现在不知道如何在扩展 GUI 上使用这些文件。我什至尝试使用 NodeJS readFile() 来读取 HTML 文件，但它无法读取文件。使用 ./html/file... 的相对路径无效。

我错过了什么？我是 JS、Node 和 VS Code 的新手...

在文档示例中，他们将 HTML 放入这样的字符串中:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', 
() => {
    // Create and show panel
    const panel = vscode.window.createWebviewPanel('catCoding', "Cat Coding", 
    vscode.ViewColumn.One, { });

    // And set its HTML content
    panel.webview.html = getWebviewContent();
}));
}

function getWebviewContent() {
    return `<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
    </head>
    <body>
    <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
    </body>
    </html>`;
}

是否可以将 HTML 或至少 JS 和 CSS 放在一个单独的文件中？这样可以使用库并拥有更清晰的代码。

文档链接:VS Code Webview API

谢谢!

最佳答案

它对文件夹 src/html/ 中的文件的工作方式是:

import * as path from 'path'
import * as fs from 'fs'

const filePath: vscode.Uri = vscode.Uri.file(path.join(context.extensionPath, 'src', 'html', 'file.html'));
panel.webview.html = fs.readFileSync(filePath.fsPath, 'utf8');

关于visual-studio-code - 在 Visual Studio Code 扩展开发中使用 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51236058/

24 4 0
文章推荐： Angular 5 RxJs concatMap、switchMap、mergeMap 哪个？
文章推荐： css - Bootstrap 4 带预览和溢出扩展的折叠面板
文章推荐： laravel - 在 Laravel Blade 中格式化电话号码
文章推荐： python - TRUNCATE TABLE 在 Pyodbc 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com