VSCode自定义个性化console.log，快捷打印

news2024/9/30 19:41:56

最终效果，通过Ctrl + Alt + l快捷键打印选中值

在这里插入图片描述

如何自定义Console.log样式？

可以使用 %c 为打印内容定义样式：

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。

在这里插入图片描述
更多介绍可以查看MDN Console Doc

VSCode配置

配置用户代码片段
按照下面步骤文件》首选项》配置用户代码片段》新建全局代码片段文件

输入一个片段文件名，例如console.log

修改为下面内容，这里用了一些内置的变量，具体可以参考VSCode snippets

{
    // Print Selected Variabl 为自定义快捷键中需要使用的name，可以自行修改
	"Print Selected Variable": {
		"body": [
			"\nconsole.log(",
			"  '%c $CLIPBOARD: ',",
			"  'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',",
			"  $CLIPBOARD$1",
			")"
		],
		"description": "Print Selected Variable"
	}
}

设置快捷键
按照下面步骤文件》首选项》键盘快捷方式》打开keybindings.json

这里会显示当前设置的一些快捷键

在里面加入下面代码，这里用到多个命令，具体可以参考VSCode runCommands

{
    "key": "ctrl+alt+l", // 自定义快捷键
    "command": "runCommands", // 运行多个命令
    "args": {
        "commands": [
            {
                "command": "editor.action.clipboardCopyAction" // 复制选中文本
            },
            {
                "command": "cursorEnd" // 光标移到最后
            },
            {
                "command": "editor.action.insertSnippet", // 插入片段
                "args": {
                    "name": "Print Selected Variable" // 调用已配置的代码片段，这里是代码片段里定义的值
                }
            }
        ]
    }
}