README-ZH
提升日常开发效率的 VS Code 插件，当前包含图片管理与 Vite + React 组件快速预览。
功能
- 图片管理：监听图片目录变更，自动生成/更新
index.ts/index.js。
- 组件预览：在 VS Code 中快速预览 Vite + React 组件（
.tsx / .jsx）。
图片管理
配置
在 VS Code 设置中配置以下字段：
workTools.image.folder：图片文件夹路径（默认 images），插件会监听该文件夹变化。workTools.image.suffix：导出变量后缀（默认 Img），如 export const LogoImg = logo.src;。
使用
- 在工作区中创建或维护图片目录（默认
images）。
- 新增/删除图片文件后，插件会自动更新图片目录下的
index.ts/index.js。
- 生成的导出会以文件名为基础自动生成变量名（不合法会提示）。
Vite + React 组件预览
使用
- 在
.tsx / .jsx 文件上右键，选择「查看效果」。
- 或在编辑器内右键选择「查看效果」。
- 插件会自动启动预览并渲染组件。
命令
workTools.react.preview：查看效果
依赖
扩展设置
本扩展贡献以下设置：
workTools.image.folderworkTools.image.suffix
已知问题
更新日志
0.0.1
- 初始版本：图片管理与 Vite + React 组件预览。
README-EN
Work-tools is a VS Code extension that improves day-to-day productivity, currently providing image management and Vite + React component preview.
Features
- Image management: watch image directory changes and auto-generate/update
index.ts/index.js.
- Component preview: quickly preview Vite + React components inside VS Code (
.tsx / .jsx).
Image Management
Settings
Configure the following in VS Code settings:
workTools.image.folder: image folder path (default images). The extension watches this folder.workTools.image.suffix: export variable suffix (default Img), e.g. export const LogoImg = logo.src;.
Usage
- Create or maintain an image folder in the workspace (default
images).
- On image add/delete, the extension updates
index.ts/index.js inside the image folder.
- Export names are generated from file names; invalid names will be reported.
Vite + React Component Preview
Usage
- Right-click a
.tsx / .jsx file and choose "查看效果".
- Or right-click inside the editor and choose "查看效果".
- The extension will start the preview and render the component.
Commands
workTools.react.preview: preview component
Requirements
Extension Settings
This extension contributes the following settings:
workTools.image.folderworkTools.image.suffix
Known Issues
Release Notes
0.0.1
- Initial release: image management and Vite + React component preview.
| |
