Question

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

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

我想念什么？我在JS，Node和VS Code上还很新...

在docs示例中，他们将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

谢谢！

Answer 1

我什至尝试使用NodeJS readFile（）读取HTML文件，但是它无法读取该文件。使用./html/file...的相对路径无效。

尝试事先使用context.asAbsolutePath() method。它将针对扩展的根目录而不是当前工作目录（即VSCode安装目录）解析相对路径。

Answer 2

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

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

感谢@ Gama11的提示！

Answer 3

您可以这样使用：

import * as fs from 'fs';

const pathToHtml= vscode.Uri.file(
            path.join(context.extensionPath, 'src','YourHtml.html');
         )

const pathUri = pathToHtml.with({scheme: 'vscode-resource'});

panel.webview.html = fs.readFileSync(pathUri.fsPath,'utf8');

此处context.extensionPath包含扩展名的目录。 src是扩展中的文件夹，其中包含您的HTML文件。

在Visual Studio代码扩展开发中使用HTML文件

3 个答案: