要提升Fitten Code侧边栏聊天框文字清晰度,需手动修改其Webview的CSS:启用插件后通过开发者工具定位chat相关CSS文件,在末尾添加含!important的font-size和line-height规则并保存,再右键Reload生效。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

想让Fitten Code插件的侧边栏聊天框文字更清晰易读,避免小字挤在一起看不清内容,必须直接修改其Webview渲染层的CSS样式,因为插件自身设置界面不提供侧边栏字体调节选项。
确认Fitten Code侧边栏是否已启用
点击VS Code左侧活动栏中的Fitten Code图标(蓝色对话气泡),若弹出空白或标题为“Fitten Code – Chat”的面板即为已启用;若点击无反应,请先通过「Ctrl+Shift+P → 输入Fitten: Open Chat Window」强制唤起。
右键点击聊天框空白区域,若出现「检查」菜单项,说明Webview组件正常加载;未出现则需重装Edge WebView2运行时并重启VS Code。
定位并编辑Fitten Code的UI样式文件
按下 Ctrl+Shift+P 打开命令面板,输入「Developer: Open Webview Developer Tools」并回车→ 切换到「Elements」标签页→ 在DOM树中展开 <webview> → 右键点击最外层 <body> → 选择「Edit as HTML」。
这一步不能改完就关掉,否则修改立即丢失;必须将调整后的CSS规则持久化写入插件资源目录。
在VS Code中按下 Ctrl+Shift+P → 输入「Developer: Show Running Extensions」→ 找到「Fitten Code」→ 点击右侧「Extension Root Folder」链接,打开其安装目录。
进入 resources/app/dist/ 子目录,找到类似 main.*.css 或 chat.*.css 的文件(文件名含chat、ui、style等关键词,且大小超过5KB);用VS Code以管理员权限打开该CSS文件。
Fitten Code 1.0.3是一款由清华博士团队打造的AI编程助手,基于国产计图(Jittor)深度学习框架开发。它支持VS Code、JetBrains系列等主流IDE及80多种编程语言。核心功能包括智能代码补全、注释生成、代码解释、Bug检测、单元测试生成等,旨在全方位提升开发效率。该工具对个人用户免费开放。
注入自定义字体与行高规则
在打开的CSS文件末尾新增以下代码块:
/* Fitten Code侧边栏聊天框字体增强 */<br>.chat-container, .message-list, .user-input-area {<br> font-size: 15px !important;<br> line-height: 1.4 !important;<br>}
⚠️ 注意:必须添加 !important 否则被插件动态注入的内联样式覆盖;若发现生效后文字模糊,把 15px 改为 16px 再试一次。
保存文件后,回到VS Code侧边栏,右键聊天窗口 → 选择「Reload」(不是关闭再打开),新样式即时生效。
验证修改是否成功
在聊天框中发送任意消息(如“test”),观察新输入的消息和历史消息文字是否变大、行距是否舒展。
若仍显示过小:检查CSS文件是否保存在正确的 dist/ 子目录下,而非父级 resources/ 或 node_modules/;部分版本Fitten Code会从 build/ 目录加载样式,需同步检查该路径。
若行高未变化:确认浏览器开发者工具Elements面板中对应元素的computed值里 line-height 是否已更新为 1.4;若仍为 normal,说明选择器未命中,尝试将选择器改为 .fitten-chat .message-body 并重试。

















