VsCode快速打出console.log()方法设置

一、背景

作为一名前端开发,console.log是一个使用频率极高的调试功能,接下来让我们看看如何快速的打出console.log()。

二、VsCode设置

1、找到文件 > 首选项 > 配置代码片段;
2、输入javascript.json,并点击提示;

先在弹出的输入框内填入javascript.json,选择提示进而跳转相应页面。

如果是用React框架,就选择javascriptreact.json进行配置,博主这里以javascriptreact.json举例,其他类似:

XML 复制代码
{
	// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",//这里配置快速打印console.log的字母,例如:输入log,实现手动console.log效果
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}
3.修改prefix为你喜欢的打出console.log()风格,我自己设置的是log;

如果你的Print to console被注释了,直接解除注释,修改prefix中的值为你喜欢的console.log风格即可。(记得保存哟)

相关推荐
小e说说9 小时前
主流活动策划工具特点比较
编辑器
winlife_10 小时前
把 Godot 编辑器接入 AI:Funplay MCP for Godot 介绍
人工智能·编辑器·godot·ai编程·游戏开发·mcp
zhaqonianzhu13 小时前
Qoder CN 插件停更与迁移指南:从 VS Code 到通义灵码 IDE
ide·vscode
BU摆烂会噶14 小时前
【LangGraph】House_Agent 实战(一):架构与环境配置
人工智能·vscode·python·架构·langchain·人机交互
IceSugarJJ15 小时前
Windows下VSCode+ WSL项目启动流程
linux·windows·vscode·ubuntu·wsl
@noNo15 小时前
Visual Studio Code添加自定义大模型API
ide·vscode·编辑器
winlife_15 小时前
把 Cocos Creator 编辑器接入 AI:Funplay MCP for Cocos 介绍
人工智能·编辑器·ai编程·cocos creator·游戏开发·claude·mcp
拉里呱唧16 小时前
在线可视化HTML编辑器横评:8款拖拽式工具的实测对比
前端·编辑器·html
HezhezhiyuLe16 小时前
无界内嵌编辑器键盘事件失效
编辑器·计算机外设
winlife_16 小时前
嵌入式 MCP server vs 外挂桥接进程:引擎编辑器自动化的架构取舍
架构·自动化·编辑器·游戏引擎·架构设计·mcp·编辑器自动化