Console Log Plugin 🔍

一个强大的 VS Code 插件，用于快速插入带样式的 console.log 语句，支持自定义格式、颜色和图标。

✨ 功能特性

🎯 智能变量检测 - 自动识别选中文本、光标位置或剪贴板中的变量
🎨 自定义样式 - 支持颜色、图标和自定义格式的 console.log 输出
⚡ 快速插入 - 通过快捷键或命令面板快速插入日志语句
🔧 灵活配置 - 丰富的配置选项，满足不同开发需求
🎪 多种插入模式 - 支持在不同位置插入日志语句

🚀 快速开始

安装

打开 VS Code
按 Ctrl+P 打开快速打开对话框
输入 ext install s-log 并按回车
重启 VS Code

基本使用

选中变量：选中要调试的变量名
按快捷键：按 Ctrl+Shift+L 插入 console.log
选择位置：从弹出的选项中选择插入位置

⌨️ 快捷键

快捷键	功能
`Ctrl+Shift+L`	插入选中变量的 console.log
`Ctrl+Shift+Alt+L`	从剪贴板插入 console.log

🎯 使用方法

1. 选中变量插入

const userName = 'Alice';
// 选中 userName，按 Ctrl+Shift+L

结果：

const userName = 'Alice';
console.log('%c 🔍 userName ', 'background: #ff6b6b; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', userName);

2. 从剪贴板插入

复制变量名到剪贴板
将光标放在要插入的位置
按 Ctrl+Shift+Alt+L

3. 智能变量检测

插件会根据您的配置模式检测变量：

检测模式：

剪贴板模式（默认）：优先检查剪贴板中的变量名
选中文本模式：使用当前选中的文本
光标位置模式：检测光标位置的变量
当前行模式：查找当前行中的变量

智能回退：如果主要模式未找到变量，自动尝试：

当前选中的文本
光标位置的变量
当前行中的变量
剪贴板中的变量

⚙️ 配置选项

日志格式

{
    "consoleLogPlugin.logFormat": "console.log(\"{variable}------------\", {variable});"
}

使用 {variable} 作为变量名的占位符。

颜色设置

{
    "consoleLogPlugin.useColors": true,
    "consoleLogPlugin.colorStyle": "background",
    "consoleLogPlugin.defaultColor": "#ff6b6b"
}

颜色样式选项：

background：背景色高亮
text：文字颜色
both：背景色和文字色

图标设置

{
    "consoleLogPlugin.useIcons": true,
    "consoleLogPlugin.iconType": "emoji"
}

图标类型：

emoji：🔍 表情符号
symbol：★ 符号
arrow：→ 箭头

智能类型检测

{
    "consoleLogPlugin.autoDetectVariableType": true
}

启用后，插件会根据变量名自动选择颜色：

error 相关：🔴 红色
success 相关：🟢 绿色
warning 相关：🟡 橙色
info 相关：🔵 蓝色
data/response 相关：🟣 紫色

变量检测模式

{
    "consoleLogPlugin.variableDetectionMode": "clipboard"
}

控制插件如何检测要记录的变量：

clipboard：优先检查剪贴板中的变量名（默认）
selection：使用选中的文本作为变量名
cursor：检测光标位置的变量
currentLine：查找当前行中的变量

智能回退：如果主要检测模式未找到变量，插件会自动尝试其他方式。

🎨 样式示例

背景高亮样式

console.log('%c 🔍 userData ', 'background: #ff6b6b; color: white; font-weight: bold; padding: 2px 4px; border-radius: 3px;', userData);

文字颜色样式

console.log('%c🔍 userData:', 'color: #ff6b6b; font-weight: bold;', userData);

自定义格式

console.log("userData------------", userData);

📋 插入模式

下一行插入 - 在当前行的下一行插入（推荐）
光标位置 - 在光标确切位置插入
选择后插入 - 在选中文本的下一行插入
内联注释 - 作为注释添加到行末

🎯 命令面板

按 Ctrl+Shift+P 打开命令面板，搜索：

Console Log Plugin: Insert Console Log - 插入日志
Console Log Plugin: Insert Console Log from Clipboard - 从剪贴板插入
Console Log Plugin: Open Console Log Settings - 打开设置

🛠️ 开发

本地开发

# 克隆项目
git clone <repository-url>
cd LogPlugin

# 安装依赖
npm install

# 启动开发模式
npm run watch

# 打包扩展
npm run package

# 发布扩展
npx vsce package

测试

按 F5 在新的 VS Code 窗口中测试扩展。

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 反馈

如果你有任何问题或建议，请在 GitHub Issues 中提出。

享受愉快的调试体验！ 🎉

A Smart Log

theskyworld