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风格即可。(记得保存哟)

相关推荐
夏至xz12 小时前
类似 typora 的新一代 Markdown 编辑器
编辑器·typora·markdown·milkup·milkdown
White-Legend13 小时前
我用GTP5.4写了一个飞书编辑器
人工智能·gpt·编辑器·飞书·ai编程
Ama_tor13 小时前
Visual Studio Code (VS Code) |下载与前端开发环境配置(带图详细)
ide·vscode·编辑器
愿^O^~13 小时前
VSCode 启动 Spring Boot 微服务 JMX 端口冲突问题
spring boot·vscode·微服务
阴暗扭曲实习生13 小时前
135编辑器API接口设计与开发指南
windows·编辑器
ricky_fan13 小时前
(最新版)Cluade code安装、部署教程-Mac
linux·编辑器·vim
ONLYOFFICE13 小时前
ONLYOFFICE 全新 PDF 编辑器 API 上线,自动化处理 PDF 内容
前端·人工智能·pdf·编辑器·onlyoffice
徐小夕@趣谈前端13 小时前
借助AI,1周,0后端成本,我们开源了一款Office预览SDK
前端·人工智能·开源·node.js·编辑器·github·格式工厂
还是大剑师兰特1 天前
Vue3 前端专属配置(VSCode settings.json + .prettierrc)
前端·vscode·json
学嵌入式的小杨同学1 天前
STM32 进阶封神之路(十五):DHT11 单总线实战 —— 温湿度检测从时序解析到代码落地(库函数 + 寄存器)
vscode·stm32·单片机·嵌入式硬件·mcu·智能硬件·pcb工艺