VSCode 插件开发实战（四）：使用 React 实现自定义页面

乐闻x2024-12-23 12:38

前言

VSCode 是当今最受欢迎的代码编辑器之一，其强大的扩展能力使得开发者能够根据自身需求创建定制化的开发环境。在这篇教程中，我们将深入探讨如何使用 React 框架在 VSCode 中创建自定义插件页面。通过这一过程，你将学会如何结合现代前端技术与 VSCode 插件开发，实现一个功能丰富且用户体验友好的插件页面。本教程将涵盖基础环境配置、React 集成、插件与组件的通信以及高级优化技巧，帮助你全面掌握这项技能。

基础实现

添加 React 到项目

我们将 React 添加到我们的项目中。

  1. 安装 React 和 React DOM：
clike 复制代码 
npm install react react-dom
  1. 安装 Webpack 和相关插件，用于打包 React 代码：
clike 复制代码 
npm install --save-dev webpack webpack-cli ts-loader
  1. 创建一个 webpack.config.js 文件，并添加以下配置：
clike 复制代码 
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/webview/index.tsx',
    output: {
        path: path.resolve(__dirname, 'out', 'webview'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
};
  1. 更新 tsconfig.json 文件，添加对 React JSX 的支持：
clike 复制代码 
{
    "compilerOptions": {
        "jsx": "react"
    }
}

创建 React 组件

现在，创建 React 组件并集成到 VSCode 插件中。

  1. 在 src 目录下创建 webview 文件夹，并在其中创建 index.tsx 文件：
clike 复制代码 
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App: React.FC = () => {
    return (
        <div>
            <h1>Hello from React!</h1>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));
  1. 在 media 目录下创建一个 index.html 文件：
clike 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Webview</title>
</head>
<body>
    <div id="root"></div>
    <script src="out/webview/bundle.js"></script>
</body>
</html>

集成到 VSCode 插件中

最后，我们将 React 组件集成到 VSCode 插件中。

  1. 打开 src/extension.ts 文件，添加以下代码来实现 Webview：
clike 复制代码 
import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showReactWebview', () => {
            const panel = vscode.window.createWebviewPanel(
                'reactWebview',
                'React Webview',
                vscode.ViewColumn.One,
                {
                    enableScripts: true,
                    localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
                }
            );

            const indexPath = vscode.Uri.file(path.join(context.extensionPath, 'media', 'index.html'));
            panel.webview.html = `<iframe src="${indexPath.with({ scheme: 'vscode-resource' })}" frameBorder="0" style="width:100%; height:100%"/>`;
        })
    );
}
  1. 在 package.json 中添加新命令：
clike 复制代码 
"contributes": {
    "commands": [
        {
            "command": "extension.showReactWebview",
            "title": "Show React Webview"
        }
    ]
}

运行和测试

  1. 在命令行中运行以下命令来打包你的 React 代码：
clike 复制代码 
npm run build

  1. 在 VSCode 中按 F5 启动插件开发主机，打开新的 VSCode 窗口。

  2. 在新窗口中按 Ctrl+Shift+P，输入并执行 Show React Webview 命令，你将看到一个显示 "Hello from React!" 的面板。

进阶操作

现在你已经学会了基本的集成方法，我们可以进一步优化和扩展这个插件，使其更加实用和强大。接下来，我们将介绍如何在 React 组件和 VSCode 插件之间进行通信，以及如何利用插件 API 实现更多功能。

在 React 和 VSCode 之间通信

为了让 React 组件与 VSCode 插件进行通信，可以使用 VSCode 提供的 postMessage 和 onDidReceiveMessage 方法。

  1. 修改 src/extension.ts 文件，添加消息处理逻辑：
clike 复制代码 
import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showReactWebview', () => {
            const panel = vscode.window.createWebviewPanel(
                'reactWebview',
                'React Webview',
                vscode.ViewColumn.One,
                {
                    enableScripts: true,
                    localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
                }
            );

            const indexPath = vscode.Uri.file(path.join(context.extensionPath, 'media', 'index.html'));
            panel.webview.html = `<iframe src="${indexPath.with({ scheme: 'vscode-resource' })}" frameBorder="0" style="width:100%; height:100%"/>`;

            // 接收来自 webview 的消息
            panel.webview.onDidReceiveMessage(
                message => {
                    switch (message.command) {
                        case 'alert':
                            vscode.window.showInformationMessage(message.text);
                            break;
                    }
                },
                undefined,
                context.subscriptions
            );
        })
    );
}
  1. 修改 src/webview/index.tsx 文件，发送消息到插件：
clike 复制代码 
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const vscode = acquireVsCodeApi();

const App: React.FC = () => {
    const handleClick = () => {
        vscode.postMessage({
            command: 'alert',
            text: 'Button clicked in React!'
        });
    };

    return (
        <div>
            <h1>Hello from React!</h1>
            <button onClick={handleClick}>Send Message to VSCode</button>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

使用插件 API 扩展功能

VSCode 插件 API 提供了丰富的接口，可以让你做更多有趣的事情，比如与文件系统交互、提供代码补全等。以下是一些简单的例子：

  1. 在 React 组件中展示当前打开的文件名：
clike 复制代码 
// 修改 src/extension.ts
export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showReactWebview', () => {
            const panel = vscode.window.createWebviewPanel(
                'reactWebview',
                'React Webview',
                vscode.ViewColumn.One,
                {
                    enableScripts: true,
                    localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'media'))]
                }
            );

            const indexPath = vscode.Uri.file(path.join(context.extensionPath, 'media', 'index.html'));
            panel.webview.html = `<iframe src="${indexPath.with({ scheme: 'vscode-resource' })}" frameBorder="0" style="width:100%; height:100%"/>`;

            // 接收来自 webview 的消息
            panel.webview.onDidReceiveMessage(
                message => {
                    switch (message.command) {
                        case 'alert':
                            vscode.window.showInformationMessage(message.text);
                            break;
                    }
                },
                undefined,
                context.subscriptions
            );

            // 发送当前文件名到 webview
            const activeEditor = vscode.window.activeTextEditor;
            if (activeEditor) {
                panel.webview.postMessage({
                    command: 'setFileName',
                    fileName: activeEditor.document.fileName
                });
            }
        })
    );
}
  1. 修改 src/webview/index.tsx 文件，接收并展示文件名：
clike 复制代码 
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const vscode = acquireVsCodeApi();

const App: React.FC = () => {
    const [fileName, setFileName] = React.useState<string | null>(null);

    React.useEffect(() => {
        window.addEventListener('message', event => {
            const message = event.data;
            switch (message.command) {
                case 'setFileName':
                    setFileName(message.fileName);
                    break;
            }
        });
    }, []);

    const handleClick = () => {
        vscode.postMessage({
            command: 'alert',
            text: 'Button clicked in React!'
        });
    };

    return (
        <div>
            <h1>Hello from React!</h1>
            <button onClick={handleClick}>Send Message to VSCode</button>
            {fileName && <p>Current File: {fileName}</p>}
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

总结

通过本教程，我们系统地讲解了如何在 VSCode 插件中集成 React，并实现自定义页面和插件间的通信。你不仅学会了创建简单的 VSCode 插件，还掌握了通过 Webpack 优化打包以及利用 VSCode API 扩展插件功能的高级技巧。希望这些知识能够帮助你在 VSCode 插件开发中更加游刃有余，并激发你的创造力，开发出更多有趣且有用的插件。

相关推荐
前端没钱5 分钟前
从 Vue 迈向 React：平滑过渡与关键注意点全解析
前端·vue.js·react.js
乐闻x32 分钟前
VSCode 插件开发实战（三）：插件配置项自定义设置
ide·vscode·编辑器
羊小猪~~1 小时前
前端入门之VUE--ajax、vuex、router，最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
高山我梦口香糖3 小时前
[react] ＜NavLink＞自带激活属性
前端·javascript·react.js
撸码到无法自拔3 小时前
React：组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖3 小时前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
qq_397562315 小时前
android studio更改应用图片，和应用名字。
android·ide·android studio
峥嵘life5 小时前
Android Studio版本升级那些事
android·ide·android studio
irisMoon066 小时前
react项目框架了解
前端·javascript·react.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）