Dioxus VSCode 扩展指南在编辑器内自动格式化 RSX、HTML 转 RSX 与源码级构建【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus本文以 packages/extension/README.md 为骨架结合其 TypeScript 入口、Rust/WASM 导出层与 Cargo/package 配置系统讲解 Dioxus VSCode 扩展的四大命令HTML 转 RSX、HTML 转 Dioxus Component、Format RSX、Format RSX Document、保存即格式化的dioxus.formatOnSave配置以及如何从源码构建出.vsix安装包。读完本文你将能够像维护者一样使用这套“编辑器侧封装 Dioxus CLI 能力”的工具链并理解其格式化、翻译能力的底层实现来源。扩展的定位把 Dioxus CLI 的核心能力搬进编辑器Dioxus 是面向 Web、桌面与移动端的全栈应用框架其 UI 使用 Rust 中的rsx!宏描述。手写 RSX 时缩进、括号与 HTML 标签转换极易出错因此官方在 packages/extension 维护了一个 VSCode 扩展This extension wraps functionality in Dioxus CLI to be used in your editor!与把格式化逻辑在 TypeScript 中重复实现一遍不同该扩展把 Rust 侧已有的工具库dioxus-autofmt负责 RSX 格式化、dioxus-rsx-rosetta负责 HTML 转 RSX编译为 WebAssembly再由 VSCode 扩展宿主直接调用。这意味着编辑器里的格式化结果与命令行/Dioxus CLI 保持一致且扩展本体可以打包成一个纯 JS/WASM 产物不依赖本地安装额外的二进制工具除从源码构建时需要 Rust 工具链外。扩展声明的能力清单摘自 READMEAuto-format RSX保存文件时自动格式化 RSXConvert HTML to RSX把选中 HTML 片段转换为合法 rsxConvert HTML to Dioxus Component转换为 Dioxus 组件并把内联 SVG 抽成独立模块Format RSX格式化当前文件/选区中的 RSX。从 manifest 看命令注册与激活方式扩展的运行时清单位于 packages/extension/package.json。几个值得注意的关键点activationEvents: [onLanguage:rust]仅在打开 Rust 文件时激活扩展main: ./out/main.jswebpack 打包后的入口由 packages/extension/webpack.config.js 生成到out目录并以commonjs2作为库目标输出extensionKind: [ui, workspace]扩展同时支持在 UI 侧与工作区侧运行通过contributes.commands注册了 4 个命令命令 ID命令面板标题作用extension.htmlToDioxusRsxDioxus: Convert HTML to RSX将选中 HTML 翻译为 RSXextension.htmlToDioxusComponentDioxus: Convert HTML to Component将选中 HTML 翻译为 Dioxus 组件extension.formatRsxDioxus: Format RSX格式化当前选区自动补全到完整花括号块extension.formatRsxDocumentDioxus: Format RSX Document格式化整个 Rust 文档dioxus.formatOnSave配置的三档取值及语义见后文“保存即格式化”一节。命令背后的实现细节TypeScript 入口扩展激活逻辑在 packages/extension/src/main.ts。activate()的第一步是从磁盘pkg/dioxus_ext_bg.wasm读取 WASM 字节并调用init()。注释中特别解释了原因wasm-bindgen 默认生成的胶水代码依赖fetch加载 WASM而 VSCode 扩展宿主环境没有fetch因此这里直接以字节缓冲方式初始化绕开 fetch 机制。随后注册两个格式化钩子与 4 条命令context.subscriptions.push( vscode.workspace.onWillSaveTextDocument(formatOnSave) ); context.subscriptions.push( vscode.commands.registerCommand(extension.htmlToDioxusRsx, () translate(false)), vscode.commands.registerCommand(extension.htmlToDioxusComponent, () translate(true)), vscode.commands.registerCommand(extension.formatRsx, fmtSelection), vscode.commands.registerCommand(extension.formatRsxDocument, formatRsxDocument) );HTML 转 RSX / 转 Componenttranslate(false | true)两个 HTML 翻译命令共用同一个translate(component)函数读取当前activeTextEditor的选区文本若选区为空弹出提示Please select HTML fragment before invoking this command!并返回调用dioxus.translate_rsx(html, component)其中第二个布尔参数决定是否生成组件形态返回字符串非空则用editor.edit替换选区为空则提示Errors occurred while translating, make sure this block of HTML is valid。README 对“Convert HTML to Dioxus Component”有额外说明转换时会生成一个合法的 Dioxus 组件且把所有 SVG 抽离到各自独立的模块module中方便复用与维护图标资源。Format RSX 命令fmtSelection 的选区智能扩展fmtSelection并非只格式化光标所在行它做了两步“选区补全”保证能拿到完整的rsx!{ ... }块把选区横向扩到整行从选中行首到结束行尾字符循环统计花括号配对只要开括号{数量大于闭括号}数量就继续向下扩展一行直到括号闭合或到达文件末尾。随后通过统计选区上方文本的花括号深度计算base_indentation结合编辑器的tabSize与insertSpaces设置调用 WASM 侧的dioxus.format_selection(...)最后按基础缩进为结果补空格或 Tab。若格式化抛错会提示确认已安装最新版 Dioxus CLI 且选中了合法 rsx错误信息同时给出 Rust 侧提示因为部分格式化路径仍以 CLI/rustfmt 为后盾。保存即格式化onWillSaveTextDocument waitUntil扩展通过vscode.workspace.onWillSaveTextDocument挂入保存管线并且刻意使用e.waitUntil(...)让返回的TextEdit[]在保存完成前生效——这是与 VSCode 保存流程正确同步的关键。main.ts 源码注释明确说明它“与其他格式化器如 rust-analyzer并行运行”因此rustfmt负责普通 Rust 代码、Dioxus 扩展负责rsx!块二者互不冲突。formatOnSave的判定顺序是文档语言必须是rust→ 读取该文档作用域的dioxus.formatOnSave→ 仅当其值不等于disabled时才执行。也就是说即使editor.formatOnSave被关闭只要dioxus.formatOnSave显式设为enabled保存时仍会格式化 RSX反之设为disabled则任何情况下都不格式化。Format RSX Document 命令与 dioxus.formatOnSave 配置dioxus.formatOnSave由 package.json 的contributes.configuration声明类型为字符串枚举默认值及含义如下取值行为followFormatOnSave默认仅在编辑器editor.formatOnSave开启时保存 Rust 文件才格式化 RSXenabled只要保存 Rust 文件就总是格式化 RSXdisabled保存文件时从不格式化 RSXformatRsxDocument命令则直接调用与formatOnSave相同的formatDocument逻辑只是通过WorkspaceEdit立即应用结果方便手动触发整文档格式化。Rust/WASM 导出层四条命令如何落到真实逻辑扩展并非重复造轮子命令最终都调用 Rust 侧通过#[wasm_bindgen]导出的函数这些函数定义在 packages/extension/src/lib.rs其 Cargo 依赖见 packages/extension/Cargo.tomlwasm-bindgen、dioxus-autofmt、dioxus-rsx-rosetta、html_parser、syn且crate-type [cdylib, rlib]以便产出 WASM。导出面共有四组format_rsx(raw, use_tabs, indent_size) - String调用dioxus_autofmt::fmt_block根据布尔值选择IndentType::Tabs或IndentType::Spaces缩进宽度为indent_sizeformat_selection(raw, use_tabs, indent_size, base_indent) - String同上但把base_indent传入fmt_block作为基准缩进——对应编辑器里选区上方嵌套层级深、需要把格式化结果“塞回”原缩进层级的情形format_file(contents, use_tabs, indent_size) - FormatBlockInstance先以syn::parse_file解析整个文件再交由dioxus_autofmt::try_fmt_file找出文件内所有可格式化的rsx!宏块最后用apply_formats合并成新文本。FormatBlockInstance暴露formatted()与length()内部保存VecFormattedBlock长度表示实际产生了几处修改TypeScript 侧据此判断“是否有变化可应用”translate_rsx(contents, component) - String先由html_parser::Dom::parse保证输入是合法 HTML再用dioxus_rsx_rosetta::rsx_from_html转成 RSX 调用体最后经dioxus_autofmt::write_block_out输出规范排版的 RSX 文本。从源码结构看扩展在“格式化”场景走的是全文件精确映射路线dioxus-autofmt会收集文件中每个rsx!宏的字节偏移并产出FormattedBlock见 packages/autofmt/src/lib.rs 中FormattedBlock { formatted, start, end }的定义与try_fmt_file的“嵌套 RSX 自动处理、表达式不完整即提前返回”策略这与format_file接口完全对应也为将来把整块重写改成逐行精准小编辑预留了接口设计空间。从源码构建扩展.vsixREADME 给出三条构建前置步骤。结合 package.json 的 scripts 可以做更完整的还原安装 wasm-bindgen-cli版本需匹配README 原文为cargo binstall wasm-bindgen-cli确保与 Cargo.lock 中 wasm-bindgen 版本一致否则绑定生成可能不兼容安装 Node 依赖在packages/extension目录执行npm install生成 .vsix执行npm run vsix其内部调用vsce package而vscode:prepublish钩子会先执行npm run build-base。build-base脚本链完整展示了从 Rust 到 VSCode 插件的流水线cargo build --target wasm32-unknown-unknown --release # 编译出 pkg/dioxus_ext.wasm wasm-bindgen --out-dirpkg --targetweb \ --omit-default-module-path --omit-imports pkg/dioxus_ext.wasm # 生成 web 胶水与 .d.ts webpack --mode development # 打包 main.ts → out/main.js最终pkg/目录其清单见 packages/extension/pkg/package.json以本地依赖dioxus-ext: ./pkg引入同时提供dioxus_ext.js、dioxus_ext.d.ts与.wasm文件供 src/main.ts 以import init, * as dioxus from dioxus-ext的方式调用。开发期还可使用npm run watch/npm run webpack-dev观察模式迭代并用vsce package生成本地.vsix后在 VSCode 扩展面板选择“从 VSIX 安装”。注意构建前需具备wasm32-unknown-unknowntargetrustup target add wasm32-unknown-unknown。验证与进一步阅读格式化能力的行为基线可由 Rust 侧测试佐证packages/autofmt/tests/samples.rs 及其tests/samples目录中的 50 份.rsx样例覆盖了常见 RSX 结构HTML 翻译的正确性依赖dioxus-rsx-rosettapackages/rsx-rosetta/tests。若需了解 RSX 语法与格式化语义可对照 packages/rsx 与 packages/core-macro 的宏实现想了解与编辑器格式化配套的 CLI 能力可参考 packages/autofmt 的 README 与源码文档注释。Dioxus 的入门与深入教程分属项目外文档README 中“Working with Dioxus”一节列出此处不再展开。许可说明扩展本体以 MIT 协议发布见仓库根目录 LICENSE-MIT 与扩展目录 packages/extension/LICENSE.txt。README 同时约定除非显式声明否则任何为 Dioxus 提交的贡献其版权默认按 MIT 授权并遵循仓库的贡献流程详见 notes/CONTRIBUTING.md。【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Dioxus VSCode 扩展指南：在编辑器内自动格式化 RSX、HTML 转 RSX 与源码级构建
Dioxus VSCode 扩展指南在编辑器内自动格式化 RSX、HTML 转 RSX 与源码级构建【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus本文以 packages/extension/README.md 为骨架结合其 TypeScript 入口、Rust/WASM 导出层与 Cargo/package 配置系统讲解 Dioxus VSCode 扩展的四大命令HTML 转 RSX、HTML 转 Dioxus Component、Format RSX、Format RSX Document、保存即格式化的dioxus.formatOnSave配置以及如何从源码构建出.vsix安装包。读完本文你将能够像维护者一样使用这套“编辑器侧封装 Dioxus CLI 能力”的工具链并理解其格式化、翻译能力的底层实现来源。扩展的定位把 Dioxus CLI 的核心能力搬进编辑器Dioxus 是面向 Web、桌面与移动端的全栈应用框架其 UI 使用 Rust 中的rsx!宏描述。手写 RSX 时缩进、括号与 HTML 标签转换极易出错因此官方在 packages/extension 维护了一个 VSCode 扩展This extension wraps functionality in Dioxus CLI to be used in your editor!与把格式化逻辑在 TypeScript 中重复实现一遍不同该扩展把 Rust 侧已有的工具库dioxus-autofmt负责 RSX 格式化、dioxus-rsx-rosetta负责 HTML 转 RSX编译为 WebAssembly再由 VSCode 扩展宿主直接调用。这意味着编辑器里的格式化结果与命令行/Dioxus CLI 保持一致且扩展本体可以打包成一个纯 JS/WASM 产物不依赖本地安装额外的二进制工具除从源码构建时需要 Rust 工具链外。扩展声明的能力清单摘自 READMEAuto-format RSX保存文件时自动格式化 RSXConvert HTML to RSX把选中 HTML 片段转换为合法 rsxConvert HTML to Dioxus Component转换为 Dioxus 组件并把内联 SVG 抽成独立模块Format RSX格式化当前文件/选区中的 RSX。从 manifest 看命令注册与激活方式扩展的运行时清单位于 packages/extension/package.json。几个值得注意的关键点activationEvents: [onLanguage:rust]仅在打开 Rust 文件时激活扩展main: ./out/main.jswebpack 打包后的入口由 packages/extension/webpack.config.js 生成到out目录并以commonjs2作为库目标输出extensionKind: [ui, workspace]扩展同时支持在 UI 侧与工作区侧运行通过contributes.commands注册了 4 个命令命令 ID命令面板标题作用extension.htmlToDioxusRsxDioxus: Convert HTML to RSX将选中 HTML 翻译为 RSXextension.htmlToDioxusComponentDioxus: Convert HTML to Component将选中 HTML 翻译为 Dioxus 组件extension.formatRsxDioxus: Format RSX格式化当前选区自动补全到完整花括号块extension.formatRsxDocumentDioxus: Format RSX Document格式化整个 Rust 文档dioxus.formatOnSave配置的三档取值及语义见后文“保存即格式化”一节。命令背后的实现细节TypeScript 入口扩展激活逻辑在 packages/extension/src/main.ts。activate()的第一步是从磁盘pkg/dioxus_ext_bg.wasm读取 WASM 字节并调用init()。注释中特别解释了原因wasm-bindgen 默认生成的胶水代码依赖fetch加载 WASM而 VSCode 扩展宿主环境没有fetch因此这里直接以字节缓冲方式初始化绕开 fetch 机制。随后注册两个格式化钩子与 4 条命令context.subscriptions.push( vscode.workspace.onWillSaveTextDocument(formatOnSave) ); context.subscriptions.push( vscode.commands.registerCommand(extension.htmlToDioxusRsx, () translate(false)), vscode.commands.registerCommand(extension.htmlToDioxusComponent, () translate(true)), vscode.commands.registerCommand(extension.formatRsx, fmtSelection), vscode.commands.registerCommand(extension.formatRsxDocument, formatRsxDocument) );HTML 转 RSX / 转 Componenttranslate(false | true)两个 HTML 翻译命令共用同一个translate(component)函数读取当前activeTextEditor的选区文本若选区为空弹出提示Please select HTML fragment before invoking this command!并返回调用dioxus.translate_rsx(html, component)其中第二个布尔参数决定是否生成组件形态返回字符串非空则用editor.edit替换选区为空则提示Errors occurred while translating, make sure this block of HTML is valid。README 对“Convert HTML to Dioxus Component”有额外说明转换时会生成一个合法的 Dioxus 组件且把所有 SVG 抽离到各自独立的模块module中方便复用与维护图标资源。Format RSX 命令fmtSelection 的选区智能扩展fmtSelection并非只格式化光标所在行它做了两步“选区补全”保证能拿到完整的rsx!{ ... }块把选区横向扩到整行从选中行首到结束行尾字符循环统计花括号配对只要开括号{数量大于闭括号}数量就继续向下扩展一行直到括号闭合或到达文件末尾。随后通过统计选区上方文本的花括号深度计算base_indentation结合编辑器的tabSize与insertSpaces设置调用 WASM 侧的dioxus.format_selection(...)最后按基础缩进为结果补空格或 Tab。若格式化抛错会提示确认已安装最新版 Dioxus CLI 且选中了合法 rsx错误信息同时给出 Rust 侧提示因为部分格式化路径仍以 CLI/rustfmt 为后盾。保存即格式化onWillSaveTextDocument waitUntil扩展通过vscode.workspace.onWillSaveTextDocument挂入保存管线并且刻意使用e.waitUntil(...)让返回的TextEdit[]在保存完成前生效——这是与 VSCode 保存流程正确同步的关键。main.ts 源码注释明确说明它“与其他格式化器如 rust-analyzer并行运行”因此rustfmt负责普通 Rust 代码、Dioxus 扩展负责rsx!块二者互不冲突。formatOnSave的判定顺序是文档语言必须是rust→ 读取该文档作用域的dioxus.formatOnSave→ 仅当其值不等于disabled时才执行。也就是说即使editor.formatOnSave被关闭只要dioxus.formatOnSave显式设为enabled保存时仍会格式化 RSX反之设为disabled则任何情况下都不格式化。Format RSX Document 命令与 dioxus.formatOnSave 配置dioxus.formatOnSave由 package.json 的contributes.configuration声明类型为字符串枚举默认值及含义如下取值行为followFormatOnSave默认仅在编辑器editor.formatOnSave开启时保存 Rust 文件才格式化 RSXenabled只要保存 Rust 文件就总是格式化 RSXdisabled保存文件时从不格式化 RSXformatRsxDocument命令则直接调用与formatOnSave相同的formatDocument逻辑只是通过WorkspaceEdit立即应用结果方便手动触发整文档格式化。Rust/WASM 导出层四条命令如何落到真实逻辑扩展并非重复造轮子命令最终都调用 Rust 侧通过#[wasm_bindgen]导出的函数这些函数定义在 packages/extension/src/lib.rs其 Cargo 依赖见 packages/extension/Cargo.tomlwasm-bindgen、dioxus-autofmt、dioxus-rsx-rosetta、html_parser、syn且crate-type [cdylib, rlib]以便产出 WASM。导出面共有四组format_rsx(raw, use_tabs, indent_size) - String调用dioxus_autofmt::fmt_block根据布尔值选择IndentType::Tabs或IndentType::Spaces缩进宽度为indent_sizeformat_selection(raw, use_tabs, indent_size, base_indent) - String同上但把base_indent传入fmt_block作为基准缩进——对应编辑器里选区上方嵌套层级深、需要把格式化结果“塞回”原缩进层级的情形format_file(contents, use_tabs, indent_size) - FormatBlockInstance先以syn::parse_file解析整个文件再交由dioxus_autofmt::try_fmt_file找出文件内所有可格式化的rsx!宏块最后用apply_formats合并成新文本。FormatBlockInstance暴露formatted()与length()内部保存VecFormattedBlock长度表示实际产生了几处修改TypeScript 侧据此判断“是否有变化可应用”translate_rsx(contents, component) - String先由html_parser::Dom::parse保证输入是合法 HTML再用dioxus_rsx_rosetta::rsx_from_html转成 RSX 调用体最后经dioxus_autofmt::write_block_out输出规范排版的 RSX 文本。从源码结构看扩展在“格式化”场景走的是全文件精确映射路线dioxus-autofmt会收集文件中每个rsx!宏的字节偏移并产出FormattedBlock见 packages/autofmt/src/lib.rs 中FormattedBlock { formatted, start, end }的定义与try_fmt_file的“嵌套 RSX 自动处理、表达式不完整即提前返回”策略这与format_file接口完全对应也为将来把整块重写改成逐行精准小编辑预留了接口设计空间。从源码构建扩展.vsixREADME 给出三条构建前置步骤。结合 package.json 的 scripts 可以做更完整的还原安装 wasm-bindgen-cli版本需匹配README 原文为cargo binstall wasm-bindgen-cli确保与 Cargo.lock 中 wasm-bindgen 版本一致否则绑定生成可能不兼容安装 Node 依赖在packages/extension目录执行npm install生成 .vsix执行npm run vsix其内部调用vsce package而vscode:prepublish钩子会先执行npm run build-base。build-base脚本链完整展示了从 Rust 到 VSCode 插件的流水线cargo build --target wasm32-unknown-unknown --release # 编译出 pkg/dioxus_ext.wasm wasm-bindgen --out-dirpkg --targetweb \ --omit-default-module-path --omit-imports pkg/dioxus_ext.wasm # 生成 web 胶水与 .d.ts webpack --mode development # 打包 main.ts → out/main.js最终pkg/目录其清单见 packages/extension/pkg/package.json以本地依赖dioxus-ext: ./pkg引入同时提供dioxus_ext.js、dioxus_ext.d.ts与.wasm文件供 src/main.ts 以import init, * as dioxus from dioxus-ext的方式调用。开发期还可使用npm run watch/npm run webpack-dev观察模式迭代并用vsce package生成本地.vsix后在 VSCode 扩展面板选择“从 VSIX 安装”。注意构建前需具备wasm32-unknown-unknowntargetrustup target add wasm32-unknown-unknown。验证与进一步阅读格式化能力的行为基线可由 Rust 侧测试佐证packages/autofmt/tests/samples.rs 及其tests/samples目录中的 50 份.rsx样例覆盖了常见 RSX 结构HTML 翻译的正确性依赖dioxus-rsx-rosettapackages/rsx-rosetta/tests。若需了解 RSX 语法与格式化语义可对照 packages/rsx 与 packages/core-macro 的宏实现想了解与编辑器格式化配套的 CLI 能力可参考 packages/autofmt 的 README 与源码文档注释。Dioxus 的入门与深入教程分属项目外文档README 中“Working with Dioxus”一节列出此处不再展开。许可说明扩展本体以 MIT 协议发布见仓库根目录 LICENSE-MIT 与扩展目录 packages/extension/LICENSE.txt。README 同时约定除非显式声明否则任何为 Dioxus 提交的贡献其版权默认按 MIT 授权并遵循仓库的贡献流程详见 notes/CONTRIBUTING.md。【免费下载链接】dioxusFullstack app framework for web, desktop, and mobile.项目地址: https://gitcode.com/GitHub_Trending/di/dioxus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
