Console Now 🚀
一个高效的 VS Code 插件，专为 JavaScript/TypeScript 开发者设计，支持智能变量识别，无需选中变量即可快速添加 console.log 语句。
✨ 主要功能
- 🎯 智能变量识别 - 光标停留在变量上即可识别，支持简单变量、对象属性、数组元素等
- 📝 一键插入 - 无需选中变量，光标定位即可插入 console.log 语句
- 🖱️ 悬浮操作 - 鼠标悬浮在变量上时显示快捷操作菜单
- 🎨 格式美化 - 自动保持缩进，添加时间戳标识
- 🧹 批量清理 - 一键清理所有由插件生成的 console.log
- ⚙️ 可配置 - 支持自动保存等个性化设置
🎬 快速开始
方式 1: 悬浮操作（新功能）
将鼠标悬浮在变量上
const userName = "John Doe";
// ↑ 鼠标悬浮在这里
点击悬浮菜单中的操作
- 📝 Console Now
- 🧹 移除所有 console.log
方式 2: 光标定位
将光标放在变量上
const userName = "John Doe";
// ↑ 光标放在这里（无需选中）
使用快捷键或右键菜单
方式1: 右键 → "📝 Console Now"
方式2: 命令面板 → "Console Now"
自动生成结果
const userName = "John Doe";
console.log("🔍 userName [1234]:", userName);
🎯 智能识别支持
插件可以智能识别以下类型的变量：
- 基本变量 - 光标在变量名任意位置
- 对象属性 - 如
user.name, config.settings.theme
- 数组元素 - 如
arr[0], matrix[i][j]
- 复杂表达式 - 如
window.config, this.state.data
- 选中文本 - 如果有选中文本，优先使用选中内容
🎯 使用示例
| 变量类型 |
示例 |
光标位置 |
生成的 console.log |
| 简单变量 |
userName |
任意字符上 |
console.log('🔍 userName [1234]:', userName); |
| 对象属性 |
user.name |
user 或 name 上 |
console.log('🔍 user.name [5678]:', user.name); |
| 嵌套属性 |
user.profile.avatar |
任意属性上 |
console.log('🔍 user.profile.avatar [9012]:', user.profile.avatar); |
| 数组元素 |
items[0] |
items 或 [0] 上 |
console.log('🔍 items[0] [3456]:', items[0]); |
| 复杂表达式 |
user.items[index].name |
任意部分上 |
console.log('🔍 user.items[index].name [7890]:', user.items[index].name); |
💡 使用技巧
- 无需精确选中 - 只需将光标放在变量的任意字符上
- 支持复杂结构 - 自动识别对象属性链和数组索引
- 智能边界检测 - 自动识别变量的完整范围
- 备选方案 - 如果智能识别失败，仍可手动选中文本使用
📁 支持的文件类型
.js - JavaScript.ts - TypeScript.jsx - React JSX.tsx - React TSX.mjs - ES Modules.cjs - CommonJS
🎛️ 配置选项
在 VS Code 设置中搜索 "Console Now"：
- Auto Save: 插入 console.log 后自动保存文件
🧹 清理功能
使用命令面板（Cmd+Shift+P 或 Ctrl+Shift+P）：
搜索: "Remove extension console.log statements"
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📄 许可证
MIT License - 详见 LICENSE 文件
| |
