阅读 1203

墙裂推荐:工欲善其事必先利其器(实际开发中高频使用)

墙裂推荐:工欲善其事必先利其器(实际开发中高频使用)

一. 截图工具Snipaste(截图置顶Windows界面)

百度云盘下载 提取码:5lym

人眼是信息采集最多的人类器官,同时查看的信息量多少决定了你的效率高低。

截图取色工具千千万万,Snipaste is my favorite one(中式英语押韵,嘻嘻)。它包括基本的取色,截图,标注等截图工具的基本功能。它吸引我的是可以将截图置顶Windows界面。这个功能不单单可以应用到代码开发过程中,还可以在肉眼相关的对比,匹配的日常工作中大展身手。

现实开发中我们常常需要在开发界面,页面,UI或者其他界面中来回切换,进行查看某些信息,除非你记忆超群。实际上我们关注的信息点可能就是其中的一小点,如:network中返回值的结构和字段、某部分UI的效果等。没有发现这个工具之前我一般通过半屏方式来处理,但半屏是小屏幕的噩梦。

通过截图置顶Windows界面可以方便我们同时查看多个信息源。下面是简单例子的截图,没有进行过PS。

二. VSCode 插件

1. Better Comments

注释加上不同的前缀,让注释具有不同的含义的表现,主要有以下三种。能在众多普通注释中亮瞎自己的狗眼。

2. Bracket Pair Colorizer

括号匹配,颜色区别,当代码嵌套多的时候能快速发现是否有缺括号

3. ident-rainbow

碰上彩虹,吃定彩虹。

缩进匹配,特别是在编辑html的时候,编辑嵌套层级深。

4. change-case

现实开发中常有同一个含义的变量,根据其作用含义会用不同的形式去定义,如:常量(ABC_DEF),变量(abcDef),Fucntion名(AbcDef),html属性(abc-def),路径(abc/def)等,有时候我们还会将翻译拷贝过来作为变量(abc def)。平时我们一般手动去删除字符修改。有了change-case你只需要输入几个快捷键就能完成上面繁琐的修改。

使用方法:(当然也可以设置对应模式的快捷键,可以挑几个常用的进行设置)

  1. 选中需要操作的字符
  2. 快捷键输入:ctrl + shift + p 打开命令行
  3. 输入:change case commondands,如果之前使用过会预选上,此时只需回车
  4. 上下键选择要切换的模式,查看切换的效果

注意:间隔符可任意组合比如:change.case_demo-demo2 demo3 --> changeCaseDemoDemo2Demo3

5. javascript console utils

选中需要打印的内容,快捷键:ctrl+shift+L,自动在下面一行追加打印日志代码

6. Sort Js Object keys(强迫症患者福音)

当对象属性较多,需要去查找特定属性的时候,这不无是个强力助手。平时也可以用于对象属性排序,让数据模型更加有条理。

使用方法:

  1. 框选需要排序的对象(以括号为界,包含括号)
  2. ctrl + shift + p 打开命令行
  3. 输入sort就能找到对应命令

效果如下:

7. Code Runner

有时候想测试一些简单的函数代码,可以通过在浏览器控制台书写对应代码运行查看结果。这个过程比较繁琐,而且控制台不支持自动换行,一些语法提示等。Code Runner便能很好的解决以上的问题,它能运行你框选的代码,所以你只需要在编辑上编辑,框选,快捷键运行便能看到效果。

使用方法:

  1. 框选需要测试的代码
  2. 快捷键:ctrl+alt+n

三. 常用的快捷键

下面是个人实际开发中使用频率较高的几个快捷键,当然也有其他骚操作的快捷键,用的少,印象就没那么深刻。

  1. 快速查找文件

    VSCode、Chrome浏览器控制台:Ctrl+P

    github:t(输入字母t便能触发搜索当前项目下的文件)

  2. 代码命令输入行:Ctrl+Shift+P

  3. 复制追加一行:

    Ctrl+C+V(复制光标所在的行,在光标下追加一行)

    Alt+Shift+↑或者

  4. 删除一行:Ctrl+D(个人设置,也可以通过Ctrl+X剪切一行来删除)

  5. 上下移动行或者移动选中代码行:Alt+或者

  6. 跳到指定行:

    VSCode、Chrome浏览器控制台:Ctrl+G,输入行号,回车

  7. 同时编辑多行

    Ctrl+Alt+↑或者↓增加光标

    Alt+鼠标点击增加光标

    Alt+Shift+鼠标点击( 矩形选中文本:光标点[左上角]+最后点鼠标点击[右下角]确定一个矩形,且多行同时编辑)

  1. 为所选的每一行插入光标:Shift+I

  2. 选中当前行:Ctrl+L

  3. 选中所有的匹配项: CTRL + SHIFT + L

  4. 跳到变量声明处:Ctrl+鼠标点击变量

参考:

动图演示23个鲜为人知的VSCode快捷键

2020必备VS Code 插件(内附 gif 图)

关注下面的标签,发现更多相似文章
评论