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

相关推荐
持敬chijing9 分钟前
PHP开发-环境搭建-安装phpstudy-vscode工具
开发语言·vscode·php
csdn_aspnet1 小时前
Copilot能换成本地吗?VSCode接本地大模型本地化接入方案
ide·vscode·ai·ollama
青 春 记 忆3 小时前
零基础入门python04:用注册校验理解字典、集合和条件判断
开发语言·vscode·python·python3.11
00后程序员张7 小时前
有没有更轻量的 iOS 开发环境?快蝎kxapp轻量化路径与构成
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
buhuizhiyuci8 小时前
【Linux 网络篇】数据的 “循环系统“:协议认识与网络传输的流程
linux·运维·服务器·网络·vscode
ue星空1 天前
【Godot】更换编辑器外观主题
编辑器·游戏引擎·godot
没事学点编程小知识1 天前
免费的在线EPUB编辑器:E-Ink
编辑器
iCxhust2 天前
8088单板机VScode集成开发环境使用方法
ide·笔记·vscode·编辑器·微机原理·8088单板机
如何原谅奋力过但无声2 天前
现代化Python工具:uv、Ruff、Pyright、Rich(只讲重点版)
vscode·python·uv
流浪打工人2 天前
Unity3D编辑器初始化场景物体
编辑器