优化 VS Code 中 console.log 的输出样式：去除烦人的分号与空行

Pu_Nine_9

已于 2025-05-22 11:27:54 修改

阅读量408

点赞数 6

CC 4.0 BY-SA版权

分类专栏：软件设置文章标签：前端 javascript vscode typescript

于 2025-05-21 14:54:11 首次发布

本文链接：https://blog.csdn.net/nineeea/article/details/148115918

软件设置专栏收录该内容

1 篇文章

订阅专栏

一、引言

在前端开发过程中，console.log() 是我们最常用的调试工具之一。然而，VS Code 默认的代码片段功能存在一个令人困扰的问题：当我们使用快捷输入"log"时，会自动生成带有分号和多余空行的输出语句。

每次都需要手动删除这些多余内容，长期积累下来不仅浪费时间，也影响编码体验。本文将教你如何彻底解决这个问题。

二、解决方案

核心思路为通过修改 VS Code 的用户代码片段(Snippets)设置，自定义 console.log 的输出格式。

1. 找到json文件

(1) 点击左下角设置

(2) 点击“代码片段”

(3) 在顶部弹出的搜索框中下翻或搜索找到“javascript.json”和“typescript.json”，点击打开

2. 新增配置

在两个json文件中加入以下代码：

"Print to console": {
	"prefix": "log",
	"body": [
		"console.log($1)",
	],
	"description": "控制台输出"
}

此时再回去写代码就发现ok啦~

图示为我们自定义的console.log函数的样式！

三、结语

感谢您的观看，同时希望您可以点赞、收藏以及关注支持一下，您的支持与喜爱是激励我继续写下去的最大动力！！！

后续还会有更多精彩内容，关注我，精彩不迷路~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Pu_Nine_9

关注关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

VSCode设置console.log快捷键

zhangyubababa的博客

12-10

7118

1打开vscode,选择文件–首选项–用户代码片段 2选择javascript类型，打开javascript.json文件 3按照操作，设置快捷输入 4 { “Print to console”: { “prefix”: “cl”, “body”: [ “console.log(’$1’);”, ], “description”: “Log output to console” } } ...

VS code console.log快捷键设置：console.log(‘n＞＞＞‘,n)

范德萨的博客

01-13

2599

否则，选择 “新建全局代码片段文件”（New Global Snippets File）并命名为 “javascript.json”。一、打开 VS Code，并进入菜单栏选择 “文件”（File）-> “首选项”（Preferences）-> “键盘快捷方式”（Keyboard Shortcuts）。一、打开 VS Code，并进入菜单栏选择 “文件”（File）-> “首选项”（Preferences）-> “用户代码片段”（User Snippets）。二、在打开的键盘快捷方式面板中，点击右上角的。

参与评论您还未登录，请先登录后发表或查看评论

vscode 批量删除 console.log

lk2913128603的博客

12-03

2459

批量删除vscode 在日常的前端开发中很多小伙伴是不是一直使用console.log()输出在控制台中，但是项目上线了，这些东西还能保留吗？所以今天我就叫大家一种方法批量删除console.log() 场景一：删除单行文件中的console.log 进入当前文件，按快捷键：ctrl+f 这个快捷建是查找替换（注意要选择正则查找替换模式）如果是删除，替换栏不用输入 vscode正则查找替换内容利用正则表达式查找console.log() 这里提供两种正则表达式，但是都有局限性（只能删除单行）且推荐第二

VS Code Java 日志输出到调试控制台（支持异常跳转）

qq_38022877的博客

02-17

3075

从上图设置发现全局调试输出。而这一配置值在扩展的描述信息中存在： VS Code的扩展商店有网页版，英语不好的可以在网页中搜索扩展进行网页翻译，以便查找自己需要的设置； VS Code插件网址如下： VS Code Marketplace 预览图： ...

【问题记录】vscode调试vue，console.log在vscode终端窗口无输出问题，从尝试到放弃

danqiu的博客

10-29

9617

vscode调试vue，console.log在vscode终端窗口无输出问题，从尝试到放弃

一个非常好用的console神器【vscode插件】

feeeee889的博客

06-06

2983

使用该插件的好处： 1. 不必再手动输入console.log，实现快捷键一键生成； 2. 每次生成的console.log中会附带一个随机emoji，方便我们在众多输出中快速找到想要的输出（emoji不同于文字，人类的大脑在面对图像时印象会更深刻，并且emoji本身也挺有趣的😁）。

VS Code 插件 Turbo Console Log 自定义 console.log 快速控制台输出

Demon's blog

02-02

3459

【代码】VS Code 插件 Turbo Console Log 自定义 console.log 快速控制台输出。

springboot集成log4jdbc -让SQL日志更加精彩

起止洺的博客

10-10

5237

环境框架: springboot 2.0 数据库: oracle 日志: springboot使用默认的logback log4jdbc介绍使用java进行数据库操作时最痛苦的莫过于拼接SQL语句。在实际运行时往往需要查看实际生成的SQL语句和实际传入的参数，或许还会有查看SQL执行时间等的需求。无论原生JDBC、dbutils、mybatis还是hibernate，使用log4j等日志框架...

// 提交表单 const submitForm = () => { if (checkItemApp() && checkName() && checkRange()) { frameFormRef.value .validate((valid) => { if (valid) { ElMessageBox.confirm('确认保存数据吗?', '保存帧结构', { confirmButtonText: '保存', cancelButtonText: '取消', type: 'warning' }) .then(async () => { // console.log('确认了') if (valid) { try { // 预处理数据 HeadItemData.value.splice(HeadItemData.value.length - 1, 1) HeadItemData.value.forEach((item) => { // delete item.endRange // delete item.startRange delete item.isWarning delete item.isNew //把每个数据项的defaultValue从16进制转为10进制 if (item.defaultValue) { item.defaultValue = parseInt(item.defaultValue, 16) } }) // 开启加载状态 fullscreenLoading.value = true // 提交帧结构（第一层校验） const fhRes = await frameheadAPI(frameForm.value) if (fhRes.code !== 200) { throw new Error(`帧头提交失败: ${fhRes.msg}`) } // 添加关联ID（第二层处理） const frameheadId = fhRes.data HeadItemData.value.forEach((item) => { item.frameheadId = frameheadId }) console.log('HeadItemData.value', HeadItemData.value) // 提交头项数据（第二层校验） const hiRes = await headitemAPI(HeadItemData.value) if (hiRes.code !== 200) { throw new Error(`头项提交失败: ${hiRes.msg}`) } // 双重校验通过 ElMessage.success('提交成功') //初始化 init() isCreating.value = false showContent.value = false frameForm.value = { type: '', desc: '' } } catch (error) { console.error('提交异常:', error) ElMessage.error( error.message || '提交失败，请检查网络或数据' ) } finally { // 确保关闭加载状态 fullscreenLoading.value = false } } }) .catch(() => { }) } }) .catch(() => { }) } }优化代码

04-07

好的，我现在需要优化用户提供的Vue代码。首先，我要仔细阅读并理解这段代码的功能。看起来这是一个提交表单的函数，包含表单验证、数据预处理、两次API调用以及状态管理。用户可能希望代码更清晰、可维护，同时处理...