Webstorm2022.1.1 配置console.log快速打印

最新推荐文章于 2024-04-25 09:55:40 发布
最新推荐文章于 2024-04-25 09:55:40 发布
阅读量1.8k 收藏 1
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45285484/article/details/124935390
版权

做前端开发想必console.log是每天必不可少的，如何更高效的打印输出呢？

本篇文章来介绍下如何在Webstorm配置高效率的打印。
实现效果
在这里插入图片描述

  1. 使用ctrl+alt+s快捷键的方式打开设置
  2. 在设置中按照下图序号所示的步骤寻找到JavaScript
    在这里插入图片描述
  3. 在模板文本输入console.log('$PARAM$',$PARAM$)
    在这里插入图片描述
  4. 输入完后记得选择应用-保存
张忠伟的博客
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebStorm 2022.2
06-27
WebStorm 2022.2
webstorm 一键 console.log
simpleDDDu的博客
07-02 4075
webstorm 一键 console.log 背景： 最近从 vscode 转战到 webstorm ，在 vscode 中装了插件 Turbo Console Log 就可以一键打印变量，在 webstorm 上竟然找不到，令我着实没想到。看网上可以自定义log，废话不说了，搞起！ 打开设置面板(windows 快捷键： ctrl + alt + s) ，找到 编辑器 -> 事实模板 --> JavaScript （如图） 找到 log 修改模板为 console.info("????
WebStorm快捷键：自定义打印控制台代码 —— console.log
奶绿走糖的博客
06-07 2408
一、操作步骤： 打开WebStorm编译器，打开Settings（Ctrl+Alt+S） 搜live 点击‘+’号，选择第一个添加模板（第二个是添加模板组） 输入命令触发代码 输入命令描述 输入命令代码 选择使用该代码的场景（我选的是JavaScript的statement，TypeScript的statement，ECMAScript or heighr的statement） 点击apply生效 代码：console.log('$PARAM$', $PARAM$) 此代码意思是，输出代码后，光标会放
前端使用 console 打印日志的使用
weixin_67722778的博客
04-25 433
前端使用 console 打印日志的使用
webstorm配置console.log打印
小马甲
11-20 1326
打开设置面板(windows快捷键：) ，找到 编辑器 -> 实时模板 ->JavaScript->log，点击log会出现对应的配置。
Webstorm上创建的Typescript项目 console.log报错显示红色
LlanyW的专栏
04-20 1410
根据其他同学的项目配置更新package.json 下的devDependencies的配置，把大部分的版本都降低。参考网上说法是没有tsconfig.json,但是我的项目已经配置了。
WebStorm 设置 console.log() 的快捷键
f18855666661的博客
09-30 2399
console.log() 在开发中经常被使用到，但是拼写有些麻烦，我们可以通过设置快捷键的方式解决这一问题，步骤如下所示： 1，点击 File --Settings进入设置面板 2，点击 Editor -- Live Templates -- JavaScript -- + 新增快捷键 3，编辑新增 console.log() 的快捷键 这里建议使用 "ll" 作为 console.log() 的快捷键，配置如下所示： 除了配置上面的三个输入框，还需要配置该快捷键应该出现的位..
前端常识-console控制台打印调试
weixin_50523140的博客
05-18 3789
本文介绍了在Web开发中使用console控制台进行打印调试的基本方法和常用技巧。读者可以学习console的基本语法和常用方法，以及如何使用console来排查开发过程中常见的调试问题。同时，本文还介绍了console的高级调试技巧和浏览器开发者工具，使开发者能够更快、更好地进行调试和分析。通过本文的学习，读者可以提高调试效率和准确性，更好地完成Web开发工作。
WebStorm 2017.3.1 汉化包
12-16
支持 2017.3.1 下载后直接放到安装目录下的 /lib/ 中，重启软件即可。 原创地址、更多汉化包、问题反馈、免积分下载：http://www.pingfangx.com/xx/translation
WebStorm 2017.3 汉化包 版本1
12-13
支持 2017.3 下载后直接放到安装目录下的 /lib/ 中，重启软件即可。 原创地址、问题反馈、免积分下载：http://www.pingfangx.com/xx/translation
WebStorm js开发工具 v2019.1.1
10-01
WebStorm是JetBrains的一个专门为Web开发人员设计的IDE，JetBrains大家应该不陌生，Resharper、IntelliJ IDEA等都是出自这个公司。WebStorm有什么功能:1、智能的代码补全2、代码格式化3、代码编写中
webstorm2021.3
最新发布
06-14
3. **ESLint集成**：作为流行的JavaScript代码质量工具，ESLint在WebStorm中的集成更加紧密，可能会有新的配置选项和更智能的错误修复建议，以确保代码风格的一致性和可读性。 4. **Vue.js和React支持**：对于前端...
WebStorm-2020.3.3.exe
03-24
WebStorm-2020.3.3.exe 试用30天
WebStorm 2017.3.1 汉化包 版本2
12-17
支持 2017.3.1 下载后直接放到安装目录下的 /lib/ 中，重启软件即可。 原创地址、更多汉化包、问题反馈、免积分下载：http://www.pingfangx.com/xx/translation
webstorm2020.3快捷键讲解
08-28
webstorm2020.3快捷键讲解
WebStorm2019.3 汉化包
04-03
WebStorm2019.3版本的汉化包。步骤简单靠谱 下载软件对应的汉化包，将 resources_zh_CN_*.jar ，放到软件安装路径下的 lib 目录中，重启软件即可 有更新连接 可以去里面下载更新的 在文本中有网盘连接可以下载如下...
vscode&webstorm配置格式化日志打印
的博客
11-08 981
编辑器配置，快捷键模板修改
webstorm快捷键大全
weixin_45226922的博客
12-20 1374
webstorm Windows版 界面操作 快捷键 说明 ctrl+alt+t 包住 增加环绕标签 ctrl+shift+N 通过文件名快速查找工程内的文件（必记） ctrl+shift+alt+N 通过一个字符快速查找位置（必记） ctrl+F 在文件内快速查找代码 F3 查找下一个 shift+F3 查找上一个 ctrl+R 文件内代码替换 ctrl+shift+R 指定目录内代码批量替换 ...
【webstorm快捷键】 给console.log设置快捷键，快速生成console.log('$PARAM$')
南北极之间
07-17 1085
conl console.log('$PARAM$');
webstorm prettier.config.js
10-19
webstorm 中 prettier.config.js 是用来配置 Prettier 插件的。Prettier 是一款代码格式化工具，可以帮助开发者自动格式化代码，使代码风格更加统一。在 webstorm 中使用 Prettier 插件需要先安装插件，然后在设置中进行配置。 要配置 Prettier 插件，可以在项目根目录下创建一个名为 prettier.config.js 的文件，并在其中编写配置信息。例如，以下是一个简单的配置文件： ``` module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 80, tabWidth: 2, }; ``` 这个配置文件指定了一些常用的 Prettier 配置项，例如是否在语句末尾添加分号、是否使用单引号等。更多配置项可以参考 Prettier 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值