vscode自动生成格式化日志
一、添加环境变量
1、步骤:
-
文件 => 首选项 => 配置用户代码片段
-
新建全局代码片段文件
-
输入框输入快捷键名称并回车,以
log为例 -
将以下代码替换 打开的文件内容
{ "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
应用商店搜索对应插件名并安装
用法:
- 选中要输出的变量名称
- windows:
ctrl + alt + L
Mac:ctrl + option + L - 可自主修改插件配置
- 注意热键冲突
webstorm自动生成格式化日志
添加实时模板
步骤:
- file => setting => editor => live templates
- 选中javascript 点击右侧边 加号 +, 选择 live templates
- Abbreviation: 输入模板名 ,以
conl为例(使用log存在命名冲突,也可直接修改原有log模板);Description:输入模板描述 - template text 输入以下内容:
console.log("🚀 ~ Date:$date$ $time$ ~ File:$filePath$ ~ Line:$line$ -----",$PARAM$)
-
点击 Edit variables 配置对应模板

-
点击 左下角蓝字Define 配置适用范围

-
点击 apply 再点击 ok
使用:
输入 conl并回车即可
本文介绍如何在VSCode中通过自定义代码片段和使用TurboConsoleLog插件来快速生成带有日期、文件名及行号的格式化日志。同时提供了webstorm设置类似功能的方法。

被折叠的 条评论
为什么被折叠?



