Image Preview（Gutter Preview）Visual Stu...
Trae 底层基于 VS Code 内核，所以 VS Code 插件直接能用。
效果：行号左侧 gutter（侧边栏）直接显示图片小缩略图，不管是本地图片路径、还是网络 URL（比如picsum.photos、lucide svg 网络地址），都会在代码行左边出现小小的图片预览，鼠标悬浮还会弹出大图预览CSDN博...。
gutter图片预览效果
安装
Trae 左侧点插件图标（方块）
搜索：Image Preview（作者：kisstkondoros，原版；也可以用 fork 版本 Frankie.vscode‑gutter‑preview‑frankie，对网络 url 兼容性更好）
- Image Preview（图片 gutter 预览，就是这个）
- Live Server：html 实时预览，改代码自动刷新
- ESLint：代码校验
- SVG Peek：svg 图标悬浮预览，
1. Vue‑Official（Volar）⭐⭐⭐⭐⭐
Vue3 官方语言支持，<script setup>语法提示、类型校验、组件跳转；写 uni‑app 也必须装，记得禁用旧 Vetur，两者冲突。
2. Path Intellisense
文件路径自动补全 ，写src="./assets/xxx.png"，自动提示 assets 里面图片、组件文件名，再也不会写错图片路径，搭配 Image Preview 体验拉满。
3. Auto Rename Tag
修改 html/vue 开始标签，结束标签自动同步改名。
例：把
<div>改成<view>，</div>自动变成</view>，uni‑app 写 view 标签巨好用稀土掘金。
4. Prettier‑Code Formatter
代码格式化，保存自动格式化，vue、html、css、js 统一格式；配合editor.formatOnSave: true，不用手动格式化。
5. Error Lens
页面开发（图片、图标、CSS，你的场景重点）
1. Iconify IntelliSense
图标神器！支持 lucide、remixicon 等全部图标库，写图标名称自动悬浮预览图标。 写 uni‑app/vue，直接写图标名，不用复制 svg，预览直接在编辑器看到。 👉和你之前的 lucide 静态 svg 完美搭配。
2. CSS Peek
鼠标悬停 class 名，直接跳转到对应 css 样式定义，不用来回滚动找样式。
3. px‑to‑rem & rpx & vw（cssrem）
单位转换插件，写 px，快捷键一键转rpx（uni‑app）、rem、vw；移动端页面开发必备。
4. SVG Peek
svg 图标悬浮预览，打开 svg 文件，侧边栏实时预览 svg，改图标颜色立刻看到效果。
📱UniApp 专属（如果你写 uni‑app）
uni‑helper‑vscode
pages.json、manifest.json 语法校验、uni‑api 提示、代码片段；创建页面组件，自动更新 pages.json，省去手动改路由的麻烦。
🛠️调试 & 效率工具（写接口、mock、console）
1. Thunder Client
编辑器内置 HTTP 请求工具，替代 Postman。
写 mock 接口、测试后端接口，直接在编辑器发请求，看返回 json，不用切浏览器。
2. Turbo Console Log
快捷键一键生成带变量名的 console.log，不用手动写console.log('xxx',xxx)，调试非常省事。
3. Todo Tree
侧边栏汇总所有// TODO:、// FIXME:注释，写原型的时候标记待改的地方，一键跳转。
4. Live Server
html 静态页面本地服务，保存自动刷新浏览器，写静态原型页面用。
📂Git 辅助（外包开发经常要提交代码）
GitLens：光标所在行显示是谁、什么时候提交的这行代码；可以看文件历史，对比版本差异