「解放双手」老舅教你VS Code Disco

观感度：🌟🌟🌟🌟🌟

口味：驴肉蒸饺

烹饪时间：15min

这是最好的时代，也是最坏的时代。

今年听到过最浪漫的一句话：咱们在键盘上留下的余温，也将随时代传递到更远的未来。

感受让理性的技术人多了份柔光滤镜。

也许你收藏了千篇万篇VS Code快捷键，很惋惜却没能记住他们，是由于你没有实际操做过，英文很差不要紧，你真正须要的是让你双手指尖的肌肉增长一些记忆。

为了让大家能跟着我一块儿操练起来，为了让大家节约宝贵的时间，提升工做效率、获得leader夸奖、同事羡慕你疯狂操做的同时还能够有时间快乐摸🐟。

我只能请出老舅了。

(老舅来了赶忙点个赞)

左边跟我一块儿画个龙🐲

左手键盘操做

左手不够长，那就右手来凑。记住，触控板锁上，再把鼠标扔一边。

面板控制

Command + Shift + P / F1命令面板

Command + Shift + E文件资源管理器

Command + Shift + F跨文件搜索

Command + Shift + D启动和调试

Command + Shift + X管理扩展

Command + Shift + M查看错误和警告

Command + J打开关闭面板

Command + N新建文件

Command + Shift + N打开新的编辑器窗口

Command + W关闭当前编辑器内窗口

Command + Shift + W关闭当前的编辑器

Command + / —缩放

Command + /添加注释

Ctrl + `打开/关闭终端

晃动你的胯胯轴

移动你的代码块

Command + Shift + Enter将光标移动到当前行的上面一行，开启新的一行代码

Command + Enter将光标移动到当前行的下面一行，开启新的一行代码

Option + 上下方向键将当前行，或者当前选中的几行代码，在编辑器里上下移动

Shift + option + 上下方向键向上或向下复制一行

这些操做好好练习一下，你的Cmd + C和Cmd + V键寿命能长点。

格式化代码

Option + Shift + F格式化代码

Command + Shift + P打开命令面板输入 tra 选择大小写实现切换

Command + J合并代码行

选中代码块按Tab增长缩进，按Shift + Tab减小缩进

依次按下Command + k Command + 0所有折叠代码

依次按下Command + K Command + J所有展开代码

指向闪耀的灯球儿

操做光标

Option + 左右方向键以单词为单位移动光标

Command + 左右方向键以行首行尾为单位移动光标

Command + 上下方向键以文档第一行和最后一行为单位移动光标

Command + Shift + \以花括号为单位移动光标

Option + 左右方向键 + Shift以单词为单位选中开头/结尾到光标之间的字符

Command + Shift + 上下方向键以当前光标为单位选中前面/后面全部内容

Option + Delete删除当前单词光标前的内容

fn + Option + Delete删除当前单词光标后的内容

fn + Command + Delete删除当前行光标右侧全部内容

Command + Delete删除当前行光标左侧全部内容

Command + Shift + K删除当前行

Command + X剪切当前行

Command + U撤销光标的移动和选择

Command + Shift + V粘贴纯文本

多光标组合技

Command + Option + 下方向键在当前光标下建立新的光标

Command + 右方向键将光标所有整理移动到每一行的行尾

Command + D

将光标处于须要建立多光标的单词处，按Command + D、Command + D、Command + D……便可实如今同一单词处添加光标

Option + Shift + I

选中内容的每一行行尾添加光标

跳转操做

Command + P搜索文件，选中即打开，若是想要保留原文件，在新窗口打开选中文件后按Command + Enter

Ctrl + Tab同时按下，先松开Tab，在列表中经过Tab切换选择你须要打开的文件，选中即松开Ctrl实现跳转。

Ctrl + G:行号可实现行跳转

Command + F12跳转到函数定义的位置

Shift + F12跳转到被引用的引用

在你右边画一道彩虹🌈

右手鼠标操做

虽说快捷键是解放鼠标，可是VS Code对鼠标的支持也整挺好的。

• 单击鼠标左键：移动光标
• 双击：选中当前光标下的单词
• 三连击：选中当前行
• 四连击：选中整个文档
• 单击行号并移动鼠标便可选中多行代码
• 鼠标选中行直接拖放能够移动被选中的代码块
• 鼠标左键拖拽过程当中按Option键 复制粘贴代码块

多光标操做

按住Option鼠标在须要建立光标处点击

如何查看已有快捷键/自定义快捷键？

在命令面板输入“打开键盘快捷方式(Open Keyboard Shortcuts)”并执行。

搜索框里输入对应字符“cmd+c”或者点击右侧小键盘图标，进行录制按键。

便可找到对应按键组合进行自定义修改。

正经插件推荐

正则大全any-rule做者：铁皮饭盒

汉化chinese

在浏览器中打开Open-In-Browser

自动闭合HTML/XMl标签Auto Close Tag

自动对应修改HTML/XMl标签Auto Rename Tag

HTML片断/模板HTML Snippets/HTML Boilerplate

高亮注释TODO Highlight

代码风格stylelint/TSLint

Vue开发必备Vetur

React开发必备ES7 React/Redux/GraphQL/React-Native snippets

Go开发必备Go

ES6代码片断JavaScript (ES6) code snippets

映射VSCode上的断点到Chrome Debugger for Chrome

路径自动提示补全Path Intellisense

弥补VSCode原生git不足GitLens

渲染颜色到代码下vscode-pigments

代码缩进提供颜色上的提示Indent Rainbow

npm的包最终致使项目的增长量Import Cost

花括号单独配色Rainbow Brackets

项目管理器，多项目开发者福音Project Manager

同步VS Code配置Settings Sync

代码格式化的神器 保证更容易写出风格一致的代码Prettier

icons图标vscode-icons-mac

更多插件请自行探索

选择适合本身项目需求的插件安装下载

❤️爱心三连击

1.看到这里了就点个赞支持下吧，你的点赞是我摇头的动力。

2.关注公众号前端食堂，你的前端食堂，记得按时摇头！

3.2019爱你永久，2020心想事成，在2019年的最后一天，祝你们新年快乐！