vscode&webstorm配置格式化日志打印

本文介绍如何在VSCode中通过自定义代码片段和使用TurboConsoleLog插件来快速生成带有日期、文件名及行号的格式化日志。同时提供了webstorm设置类似功能的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vscode自动生成格式化日志

一、添加环境变量

1、步骤:

  1. 文件 => 首选项 => 配置用户代码片段

  2. 新建全局代码片段文件

  3. 输入框输入快捷键名称并回车,以log为例

  4. 将以下代码替换 打开的文件内容

    {
       "Reset console log": { // 快捷键后缀,用来区分不同快捷键,可修改
     	"scope": "javascript,typescript", // 适用范围,可修改
     	"prefix": "log", // 快捷键名称,可修改
     	"body": ["console.log('🚀 ~ Date:$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE ~ File: $TM_FILENAME ~ Line:$TM_LINE_NUMBER ----- ', $1);"],
     	"description": "Log output to console" // 快捷键描述,可修改
       }
     }
    

2、使用:

js/ts部分 输入快捷键名称log,会弹出代码提示,找到对应快捷键后缀的提示回车即可
在这里插入图片描述

3、最终效果

console.log('🚀 ~ Date:2022/11/08 16:23 ~ File: index.vue ~ Line:31 ----- ', );

二、插件

插件名:Turbo Console Log

应用商店搜索对应插件名并安装

用法:

  1. 选中要输出的变量名称
  2. windows:ctrl + alt + L
    Mac: ctrl + option + L
  3. 可自主修改插件配置
  4. 注意热键冲突

webstorm自动生成格式化日志

添加实时模板

步骤:

  1. file => setting => editor => live templates
  2. 选中javascript 点击右侧边 加号 +, 选择 live templates
  3. Abbreviation: 输入模板名 ,以conl为例(使用log存在命名冲突,也可直接修改原有log模板);Description:输入模板描述
  4. template text 输入以下内容:
console.log("🚀 ~ Date:$date$ $time$ ~ File:$filePath$ ~ Line:$line$ -----",$PARAM$)
  1. 点击 Edit variables 配置对应模板
    在这里插入图片描述

  2. 点击 左下角蓝字Define 配置适用范围
    在这里插入图片描述

  3. 点击 apply 再点击 ok

使用:

输入 conl并回车即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值