实用vscode插件

1、自动帮你写console.log —— Turbo Console Log(全部删除可能不好使)

是否每次调试程序的时候,手动写console.log让你感觉厌倦?来来来,这里有一款vscode插件适合你,他就是:Turbo Console Log。

实用vscode插件_第1张图片

Turbo Console Log

只要将想打印的变量选中,按住ctrl + option + L(windows: ctrl + alt + L),就能在变量下方自动插入一个console.log:

image

除此之外,该插件还支持多选插入console.log:

image

添加了注释后,还支持批量注释,批量删除打印的注释。可谓是从打印到清除一条龙服务。

不仅如此,插件还贴心地根据用户的书写习惯导出了一些配置,例如,默认的console.log是双引号切没有分号结尾的,你可以在插件的Setting.json中配置引号类型和是否在console.log结尾添加分号。免去要对eslint做处理的困扰。

实用vscode插件_第2张图片

简单说下这个插件要用到的快捷键:

ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

Turbo Console Log 不好使的情况,推荐使用   console helper:

在当前行输出

在当前行输出 console.log('[ ]', ) 语句,光标聚焦在输入位置,输入变量即可。

快捷方式:

  • macOS: cmd + shift + l
  • Windows: ctrl + l

快捷删除当前页面中所有 log

删除页面上所有 log ,删除后窗口右下角会提示一共删除了几条 console.log 语句

快捷方式:

  • macOS: cmd + shift + d
  • Windows: ctrl + shift + d

2、Todo Tree

Todo Tree 将帮助咱们找到在整个应用程序代码中创建的所有待办事项。它将把它们放到一个单独的树中,还可以在面板的左侧同时查看它们

实用vscode插件_第3张图片

配置

打开vscode设置,文件→首选项→设置,然后以json文件打开,并增加以下配置

实用vscode插件_第4张图片

配置解释:

  • icon:这个为目录树图标,可以按照这个网址修改

    codicon | The icon font for Visual Studio Code

  • type:是TODO和FIXME这两个关键字的类型支持以下类型

    • tag
    • text
    • tag-and-comment
    • text-and-comment
    • line
    • whole-line
  • foreground:是指关键字在代码中的前景色

  • background:是指关键字代码中的背景色

  • opacity:透明度

  • iconColour:目录树区域的图标颜色

基本使用

  • // TODO :代表未完成事项
  • // FIXME :代表需要修复的事项

推荐配置

  "todo-tree.regex.regex": "(//|#|
                    

你可能感兴趣的:(vscode,前端,javascript)