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

一. 截图工具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你只需要输入几个快捷键就能完成上面繁琐的修改。

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

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

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

5. javascript console utils

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

6. Sort Js Object keys（强迫症患者福音）

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

使用方法：

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

效果如下：

7. Code Runner

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

使用方法：

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

三. 常用的快捷键

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

快速查找文件

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

github：t（输入字母t便能触发搜索当前项目下的文件）
代码命令输入行：Ctrl+Shift+P
复制追加一行：

Ctrl+C+V（复制光标所在的行，在光标下追加一行）

Alt+Shift+↑或者↓
删除一行：Ctrl+D（个人设置，也可以通过Ctrl+X剪切一行来删除）
上下移动行或者移动选中代码行：Alt+↑或者↓
跳到指定行：

VSCode、Chrome浏览器控制台：Ctrl+G，输入行号，回车
同时编辑多行

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

Alt+鼠标点击增加光标

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

为所选的每一行插入光标：Shift+I
选中当前行：Ctrl+L
选中所有的匹配项： CTRL + SHIFT + L
跳到变量声明处：Ctrl+鼠标点击变量

参考：

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

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