墙裂推荐：工欲善其事必先利其器(实际开发中高频使用)
一. 截图工具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+Pgithub：
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+鼠标点击变量
参考：
