如何在VSCode中创建带变量提取功能的console.log代码片段

实现步骤： #

1. 打开用户代码片段配置

   • 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）
   • 输入Preferences: Configure User Snippets并回车
   • 选择目标语言的配置文件（比如javascript.json用于JS，typescript.json用于TS，选global.code-snippets则全局生效）

2. 添加代码片段
   将以下JSON代码粘贴到打开的文件中并保存：

   {
     "Smart Console Log": {
       "prefix": "clog",
       "body": [
         "",
         "console.log(${TM_SELECTED_TEXT});"
       ],
       "description": "在当前行下方插入console.log，自动处理空行"
     }
   }
   

3. 绑定快捷键（推荐）

   • 按下Ctrl+K Ctrl+S打开键盘快捷键设置
   • 点击右上角的「打开键盘快捷方式(JSON)」图标
   • 添加以下配置（可自定义快捷键）：

     {
       "key": "ctrl+shift+l",
       "command": "editor.action.insertSnippet",
       "when": "editorTextFocus && editorHasSelection",
       "args": {
         "name": "Smart Console Log"
       }
     }
     

   • 保存配置文件

使用方法： #

• 在代码中选中要打印的变量（比如示例中的btnOpenModal）
• 按下绑定的快捷键，或者输入前缀clog后按Tab
• 程序会自动在当前代码行下方插入console.log(选中变量);，如果当前行下方没有空行，后续代码会自动下移一行，完全符合需求示例。

内容的提问来源于stack exchange，提问作者Mykyta-UA