代码格式化
概述
代码格式化工具是一个基于 Prettier 引擎的多语言代码格式化工具，支持 9 种主流编程和标记语言。当你从不同来源复制来一段乱糟糟的代码时，它能一键整理为规范格式；当你需要在不同项目间统一代码风格时，它也能帮上忙。它最大的特色是多语言覆盖广——从前端到后端，从配置到文档，一把搞定。
核心功能
- 多语言支持：覆盖 JavaScript、TypeScript、JSON、HTML、CSS、Markdown、PHP、XML、YAML 共 9 种语言，一个工具解决所有格式化需求
- 实时格式化：输入代码即自动格式化，500ms 智能防抖，避免高频重排
- 一键复制与发送：格式化结果一键复制到剪贴板，或直接发送到 AI 聊天会话
- 报错零崩溃：即使代码有语法错误或插件加载失败，也会显示友好提示并展示原始代码，不会让工具白屏
- 按需加载：常用语言（JS/TS/HTML/CSS/Markdown）即开即用，非常用语言（PHP/XML）首次使用时才自动加载插件
快速上手
首次使用 5 步走
第一步：打开工具
在左侧工具列表中找到 代码格式化，点击进入。你会看到一个"左输入 + 右输出"的双面板界面，左上角有一个语言选择下拉框。
TODO: 截图 - 工具整体界面，标注输入面板、输出面板和语言选择器
第二步：选择语言
在左上角的语言选择下拉框中，选择你要格式化的代码语言。语言按分组排列：
| 分组 | 语言 |
|---|---|
| 前端语言 | JavaScript、TypeScript、JSON、HTML、CSS |
| 后端语言 | PHP |
| 配置/数据 | XML、YAML |
| 标记语言 | Markdown |
下拉框支持过滤搜索——输入关键字（如"type"）即可快速定位到 TypeScript。
TODO: 截图 - 语言选择下拉框展开，标注分组和搜索框
第三步：输入代码
点击左侧输入面板，直接键入或粘贴（Ctrl + V）你的代码。输入后工具会自动在 500ms 内完成格式化，右侧输出面板会实时展示结果。
TODO: 截图 - 左侧输入面板粘贴代码，右侧输出面板展示格式化结果
第四步：检查结果
格式化完成后，观察右侧输出面板：
- 格式化成功：代码已按规范整理好缩进、引号、逗号等
- 格式化失败：底部会出现红色错误提示，说明具体错误原因，同时输出面板会显示原始代码（不会丢失内容）
TODO: 截图 - 格式化失败时的红色错误提示
第五步：使用结果
右侧输出面板中的格式化代码，你可以：
- 复制：点击右侧面板标题栏的 复制 按钮，一键复制到剪贴板
- 发送到聊天：点击 发送到聊天，结果直接进入 AI 聊天会话
- 切换语言重试：如果结果不理想，可以换一种语言试试
TODO: 截图 - 标注复制和发送到聊天按钮
功能详解
界面布局
工具采用经典的双栏对比布局，左右两栏各被 InfoCard 组件包裹，保持与系统主题风格一致。
左栏：输入代码
左侧面板用于输入原始代码，包含：
| 区域 | 说明 |
|---|---|
| 标题栏 | 显示"输入代码"和语言选择下拉框 |
| 代码输入区 | 可编辑的大文本输入框，支持任意文本粘贴 |
语言选择是一个 el-select 组件，支持：
- 分组展示：按语言用途分为四个组，视觉上清晰明了
- 过滤搜索：点击后输入文字可快速筛选语言
右栏：输出代码
右侧面板展示格式化后的结果，包含：
| 区域 | 说明 |
|---|---|
| 标题栏 | 显示"输出代码"和操作按钮（复制、发送到聊天） |
| 代码输出区 | 只读的大文本展示区，格式化结果在此显示 |
| 错误提示 | 底部区域，格式失败时显示红色错误信息 |
右侧面板是只读的，不可编辑。你可以在标题栏执行两个操作：
- 复制：将格式化结果写入系统剪贴板，成功后会提示"格式化后的代码已复制到剪贴板！"
- 发送到聊天：将格式化后的代码发送到 AI 聊天会话，方便后续基于它继续讨论
TODO: 截图 - 右侧面板标题栏，标注复制和发送到聊天按钮
语言支持详情
每种语言对应不同的 Prettier 解析器和预设配置：
| 语言 | 解析器 | 备注 |
|---|---|---|
| JavaScript | babel | 默认语言 |
| TypeScript | typescript | |
| JSON | json | |
| HTML | html | |
| CSS | css | |
| Markdown | markdown | |
| PHP | php | 首次使用时动态加载 @prettier/plugin-php |
| XML | xml | 首次使用时动态加载 @prettier/plugin-xml，启用 xmlWhitespaceSensitivity: 'ignore' |
| YAML | yaml |
关于 PHP 和 XML
这两个语言的格式化插件采用动态加载策略。首次使用时页面可能会短暂卡顿（等待插件下载），后续使用则不会有此延迟。如果插件加载失败（如网络问题或版本不兼容），工具会给出明确提示，不影响其他语言的使用。
格式化引擎规则
工具使用 Prettier 引擎的默认配置，默认启用以下风格规则：
- 单引号（
singleQuote: true） - 尾随逗号（
trailingComma: 'es5'）
这些规则保证了输出的一致性和业界主流风格。
实时格式化机制
代码输入采用 500ms 防抖 机制——你连续输入时不会立即触发格式化，而是等你停止输入 500ms 后才执行。这样做有两个好处：
- 避免卡顿：不会在你快速打字或粘贴大量代码时频繁触发格式化，导致界面卡顿
- 即时反馈：停止输入后半秒内即可看到结果，感知上是即时的
高级用法
与 AI 聊天联动
格式化后的代码可以通过 发送到聊天 按钮直接传入 AI 聊天会话。典型的联动场景：
- 从 GitHub Gist 或 Stack Overflow 复制一段乱格式的代码
- 在代码格式化工具中整理好缩进和风格
- 点击 发送到聊天 将格式化后的代码传给 AI
- 在聊天中进一步提问："帮我优化这段代码" 或 "解释这个函数的作用"
TODO: 截图 - 发送到聊天后的 AI 会话界面
多语言切换调试
当不确定一段代码该用什么语言解析时，可以：
- 在左侧粘贴代码
- 从下拉框中选择一种语言查看格式化效果
- 如果效果不对（比如把 Markdown 选成了 HTML），切换到其他语言重试
- 通过对比不同解析器下的输出，找到最合适的语言选项
技巧：如果一段代码同时包含多种语言（如 Vue SFC 中的 <template> + <script>），建议将各个部分分别复制出来，分别用 HTML 和 JavaScript 处理。
与复制操作配合的工作流
对于需要频繁格式化代码的日常场景，推荐以下工作流：
- 在浏览器/编辑器中 选择代码并复制（Ctrl + C）
- 切换到 AIO Hub 在输入面板粘贴（Ctrl + V）——自动格式化
- 确认结果无误 后点击 复制（Ctrl + 点击）——格式化好的代码回到剪贴板
- 回到原处 粘贴使用
整个过程不超过 10 秒，比手动调整缩进和引号快得多。
常见问题
Q：为什么格式化后代码风格和我预期的不一样？
代码格式化工具使用 Prettier engine 的默认配置（单引号、ES5 尾随逗号等），这是业界最广泛采用的风格之一。如果你的项目有特定代码规范（如双引号、无尾随逗号），预置的风格可能不能完全匹配。你可以先在工具中格式化，再根据项目规范做少量手动调整。
另外，确保你选择了正确的语言——比如把 TypeScript 代码选成 JavaScript，有时会导致解析差异。
Q：粘贴代码后没有自动格式化？
检查以下几点：
- 确认输入面板有内容：完全为空时不会触发格式化（右侧会保持空白）
- 确认语言选择正确：如果选择了与代码不匹配的语言，Prettier 可能解析失败
- 查看底部错误提示：如果有红色文本，说明格式化失败。常见原因包括语法错误（如缺少括号、分号）、不完整的代码片段等
如果所有检查都正常仍无反应，可以尝试切换一下语言再切回来，触发一次重新格式化。
Q：PHP 或 XML 提示"插件加载失败"？
PHP 和 XML 的格式化插件是动态加载的，首次使用需要联网下载。如果网络环境受限或插件版本不兼容，可能会出现加载失败提示。
解决办法：
- 检查网络连接：确保可以正常访问 npm registry
- 重试：退出工具重新进入，会再次尝试加载
- 使用备选方案：PHP 代码可以使用你习惯的 IDE 格式化，XML 可以先用 JSON 格式处理（如果数据是 JSON 格式误选了 XML）
PHP 插件依赖 @prettier/plugin-php，XML 插件依赖 @prettier/plugin-xml，两者都是社区维护的 Prettier 插件。
Q：支持 Vue 或 React 的 JSX/TSX 吗？
目前支持的语言列表中不包含 Vue SFC（.vue）或 JSX/TSX 语法。建议的处理方式：
- Vue 文件：将
<template>部分复制出来用 HTML 格式化，<script>部分用 JavaScript/TypeScript - JSX/TSX：用 TypeScript 解析器处理 script 部分，通常能正确处理 JSX 语法
未来的版本会考虑扩展对更多语言的支持。
Q：格式化结果可以复制但为什么不能编辑输出内容？
右侧输出面板是只读的，这是有意设计——它展示的是格式化结果，保证你看到的内容不会被意外修改。如果你需要对输出内容进一步修改：
- 从输出面板 复制 结果
- 粘贴到输入面板（这会覆盖原有输入，触发重新格式化）
- 在输入面板中手动调整
- 等待自动格式化后观察结果
或者，点击 发送到聊天 后在 AI 聊天中继续编辑。