webstorm配置console.log打印

一、设置面板

打开设置面板(windows 快捷键: ctrl + alt + s) ,找到 编辑器 -> 实时模板 -> JavaScript -> log,点击log会出现对应的配置

二、模板文本

将下面这些模板文本粘贴进去

console.info("🚀 ~ file:$file$ method:$method$ line:$line$ -----", $PARAM$)

三、编辑变量

点击模板右边的【编辑变量】按钮,选择变量表达式,配置完成后点击【确定】

四、生效文件

点击左下角的【更改】,弹窗中勾选【JavaScript和TypeScript】、【TypeScript】和【Vue】

五、使用log

输入 log 然后 tab 直接生成打印模板信息

六、打印效果

以下就是打印信息,包含:文件名、方法名、行数

相关推荐
maply10 小时前
VSCode 中的 Git Graph扩展使用详解
ide·git·vscode·编辑器·扩展
花花鱼11 小时前
vscode script 中间的function import等关键字 先高亮,然后又灰了,并且按ctrl+/ 注释以html的形式,导致报错处理
ide·vscode·编辑器
恋猫de小郭12 小时前
Android Studio 正式版 10 周年回顾,承载 Androider 的峥嵘十年
android·ide·android studio
老大白菜1 天前
Windsurf cursor vscode+cline 与Python快速开发指南
ide·vscode·python
XYu123011 天前
Spring Boot 热部署实现指南
java·ide·spring boot·intellij-idea
张biubiu1 天前
vscode和pycharm的区别
ide·vscode·pycharm
三天不学习2 天前
【AI编程助手系列】国产AI编程工具 DeepSeek+Cline+VSCode 快速集成
ide·vscode·ai编程·deepseek
vistaup3 天前
Android Studio 新版本24.2.2 运行后自动切到 LogCat
android·ide·android studio
工程师焱记3 天前
Vscode的AI插件 —— Cline
ide·人工智能·vscode
maply3 天前
VSCode 中 Git 扩展的使用详解
ide·git·vscode·扩展