Explorer Font Customizer
一个用于自定义 VS Code 文件树字体格式的扩展插件。
A VS Code extension to customize file explorer font styles including font family, size, weight, style, letter spacing, and line height.
✨ 功能特性 Features
- 🎨 自定义文件树字体系列 - Custom font family
- 📏 调整文件树字体大小 - Adjust font size
- 💪 设置文件树字体粗细 - Set font weight
- 🎭 修改文件树字体样式（正常/斜体）- Change font style (normal/italic)
- 📐 调整字符间距 - Adjust letter spacing
- 📊 设置行高 - Set line height
📦 安装 Installation
方式一：从 VS Code 市场安装
- 打开 VS Code
- 按
Cmd+Shift+X (macOS) 或 Ctrl+Shift+X (Windows/Linux) 打开扩展面板
- 搜索 "Explorer Font Customizer"
- 点击安装
方式二：手动安装
下载 .vsix 文件后，在 VS Code 中：
- 按
Cmd+Shift+P (macOS) 或 Ctrl+Shift+P (Windows/Linux)
- 输入 "Install from VSIX"
- 选择下载的
.vsix 文件
🚀 使用方法 Usage
第一步：安装依赖扩展
此扩展需要配合 Custom CSS and JS Loader 扩展使用：
- 在扩展市场搜索并安装
be5invis.vscode-custom-css
- 或者在首次使用时，插件会自动提示安装
第二步：配置字体样式
在 VS Code 设置中搜索 "Explorer Font"，或直接在 settings.json 中添加：
{
"explorerFont.fontFamily": "Monaco",
"explorerFont.fontSize": "14px",
"explorerFont.fontWeight": "500",
"explorerFont.fontStyle": "normal",
"explorerFont.letterSpacing": "0.5px",
"explorerFont.lineHeight": "1.6"
}
第三步：应用设置
- 按
Cmd+Shift+P (macOS) 或 Ctrl+Shift+P (Windows/Linux) 打开命令面板
- 输入 "应用文件树字体设置" 或 "Explorer Font: Apply"
- 执行命令
- 重启 VS Code 使更改生效
⚙️ 配置项 Configuration
| 配置项 |
类型 |
默认值 |
说明 |
explorerFont.fontFamily |
string |
"" |
字体系列，例如：'Monaco', 'Consolas', 'Courier New' |
explorerFont.fontSize |
string |
"" |
字体大小，例如：'14px', '1.2em' |
explorerFont.fontWeight |
string |
"" |
字体粗细：normal, bold, 100-900 |
explorerFont.fontStyle |
string |
"" |
字体样式：normal, italic, oblique |
explorerFont.letterSpacing |
string |
"" |
字符间距，例如：'0.5px', '0.1em' |
explorerFont.lineHeight |
string |
"" |
行高，例如：'1.5', '20px' |
💡 使用示例 Examples
示例 1：使用 Monaco 字体
{
"explorerFont.fontFamily": "Monaco, Menlo, 'Courier New'",
"explorerFont.fontSize": "13px",
"explorerFont.fontWeight": "normal"
}
示例 2：增大字体并加粗
{
"explorerFont.fontSize": "15px",
"explorerFont.fontWeight": "600",
"explorerFont.letterSpacing": "0.3px"
}
示例 3：优雅的斜体风格
{
"explorerFont.fontFamily": "'Fira Code', monospace",
"explorerFont.fontStyle": "italic",
"explorerFont.lineHeight": "1.8"
}
🔧 技术实现 Technical Details
此扩展通过以下方式工作：
- 根据用户配置生成自定义 CSS 文件
- 将 CSS 文件路径添加到
vscode_custom_css.imports 配置
- 配合 Custom CSS and JS Loader 扩展注入样式
- 配置更改时自动更新 CSS 文件
⚠️ 注意事项 Notes
- 首次使用需要安装 Custom CSS and JS Loader 扩展
- 应用设置后需要重启 VS Code
- 某些字体可能需要先在系统中安装
- 如果样式未生效，请检查 Custom CSS and JS Loader 是否已启用
🐛 问题反馈 Issues
如遇到问题，请访问 GitHub Issues
📝 更新日志 Changelog
查看 CHANGELOG.md 了解版本更新历史。
📄 许可证 License
MIT License - 详见 LICENSE 文件
🤝 贡献 Contributing
欢迎提交 Issue 和 Pull Request！
Enjoy customizing your VS Code file explorer! 🎉
