引子
先说明一下，此键盘侠可非彼键盘侠（免的挨揍）。那这个键盘侠是什么呢？这个键盘侠是指我们可以用键盘来完成我们日常的开发任务。不用鼠标哦，是不是很酷。当然这需要我们记住大量的快捷键，还需要借助插件来帮助我们，这一刻意练习的过程，我称它为键盘侠养成记。
学习方式
这次我想换个方式来讲解，我知道，要是光秃秃的放几个功能的快捷键使用方式会很枯燥，而且一点也不新颖，尤其是你看完了就完了，忘的一干二净。所以这次我采用实战的方式来讲解，看看我们在实际做一个项目的时候都需要用到哪些快捷键。以实际的应用点来驱动我们学习。学以致用，用不到的我们不学。如果你跟着文章敲一遍的话，我相信这些快捷键你会记得很牢固。
如果你想直接看对应的快捷键的话，可以点击目录上的快捷键集合，查看所有的快捷键
坏境
说了那么多，还没介绍我们使用的开发坏境
嗯，我是一个前端，我选择 vscode
嗯，我是一个前端，我选择 mac
嗯，我感觉使用 vim 很酷
所以这篇文章主要的坏境是 mac + vscode + vim
当然了，还需要一些其他的插件来助威。
- File Utils
- JavaScript (ES6) code snippets
- ES7 React/Redux/GraphQL/React-Native snippets
当然了，其实 vocode 提供了很多快捷键完全是可以代替 vim 下经常用到的功能，在末尾我会给出对应的快捷键。
FizzBuzz
先简单的介绍一下今天得小项目吧
写一个程序打印 1 到 100 这些数字。但是遇到数字为 3 的倍数的时候，打印 “Fizz” 替代数字，5 的倍数用 “Buzz” 代替，既是 3 的倍数又是 5 的倍数打印 “FizzBuzz”
需求很容易理解是吧
不过，这里我用 TDD 的方式来实现，是不是等不及了 那我们开始吧
新建项目
mkdir fizzbuzz && code fizzbuzz
code 命令可以用 vscode 打开这个文件夹
安装 code
- 打开 vscode
- shift + command + p -> 打开命令面板
- 输入 path
初始化项目
首先我们需要先用 npm 来初始化我们的项目，然后安装 jest 测试框架来帮助我们做 TDD
- control + ` -> 打开 vscode 内置的终端
- 创建 package.json
- 安装 jest
- 安装 @types/jest （在写代码的时候会有 api 提示）
npm init -y && npm i jest && npm i @types/jest -D
创建文件
接着我们需要创建一个 index.js 文件作为我们的入口文件。 怎么用快捷键来创建呢？首先我们需要借助 File Utils 这个插件小哥。
它可以让我们用快捷键做一系列的操作：创建、移动、改名、删除文件或者文件夹
- 安装 File Utils （安装插件不在赘述）
- 打开命令面板
- 输入 File: New File
- 输入要创建的文件名
创建文件夹
我们还需要创建 test 文件夹来存放我们的测试文件
- 打开命令面板
- 输入 File: New Folder
- 输入要创建的文件夹名
在指定的文件夹下创建文件
接着我们需要在 test 文件夹下创建 index.test.js 文件
这个操作稍微有点麻烦，我先拆分一下操作步骤
- command + shift + E -> 需要聚焦到资源管理器区域（左侧的文件区）
- 聚焦到指定的文件夹下（可以使用上下键来选择聚焦的指定文件）
- 创建文件 index.test.js 文件（具体可以看创建文件，这里不在累赘）
这里要注意聚焦到资源管理器快捷键很有可能和其他的软件冲突！！当你按完快捷键后发现不管用的话千万要记得检查快捷键冲突
跳转到指定文件
接着我们要打开 index.test.js 文件
- command + p -> 转至文件
- 输入文件名
生成测试代码块
首先我们在 index.test.js 文件内先写一个测试。这里我们要借助 ES7 React/Redux/GraphQL/React-Native 插件小哥来快速生成常用的测试代码块
- 安装 ES7 React/Redux/GraphQL/React-Native
生成 desc 代码块
- 输入 desc
生成 test 代码块
- 输入 test
打开第二个编辑区
这时候我需要一边写测试一边写逻辑，那么我不想来回切换文件呀 怎么办？在打开一个编辑区就好啦
- command + \ -> 新打开一个编辑区（这时候聚焦在新的编辑区上）
- 选择打开指定的文件
选择不同的编辑区
当我写测试的时候需要切换到编辑区1，当我写逻辑的时候需要切换到编辑区2
- command + 1 -> 切换到编辑区1
- command + 2 -> 切换到编辑区2
关闭编辑区
那怎么关闭某个编辑区呢？
- 聚焦到要关闭的编辑区
- command + k + w -> 关闭所有的文件
关闭所有的文件后，vscode 会自动关闭当前的编辑区
快速生成代码块
为了能方便我们快速生成日常开发经常使用的代码块，我们请到了 JavaScript (ES6) code snippets 插件老哥
- 安装 JavaScript (ES6) code snippets
我们可以通过这个插件找到很多生成代码块的快捷键
小伙伴们可以记录一下日常开发中经常使用到的。
下面我将演示在当前项目中用到的几个快捷生成代码块的方式
导入
接着我要在 index.test.js 文件内导入 index.js 啦
这里使用的 ESModule
- imp 快速生成导入的代码块
导出
然后我需要在 index.js 文件内默认导出一个函数
- edf 快速生成默认导出函数的代码块
编码
剩下的内容基本上是关于 vim 的使用了。这部分我会通过录制视频的方式来呈现，用文字来表述太麻烦了！！！ vscode键盘侠养成记 - fizzbuzz
先挖个坑 啥时候填就说不定了 哈哈哈哈哈 :)逃
已经填上啦 可以点击视频跳转到 b站观看
总结
我们以用驱学，以实战项目来学习对应的快捷键。 并且我们做每一件事都是有明确目标的。比如我想通过快捷键来创建文件，所以我找到了 File Utils 插件、在比如我想快速生成经常使用到的代码块，所以我找到了 JavaScript (ES6) code snippets，我们借助插件来完成我们想要的功能，甚至你也可以开发出你自己的插件。 这样我们会慢慢形成一套体系，并且随着时间会越来越完善，通过刻意练习，每个人都可以成为一名合格的键盘侠。
快捷键集合
在终端创建一个文件夹
mkdir fizzbuzz
以 vscode 的方式打开文件夹
code fizzbuzz
打开 vscode 内的终端
control + `
打开命令面板
shift + command + p
创建文件
需要安装 File Utils
// 步骤
1. shift + command + p
2. file: new file
聚焦到资源管理器
command + shift + E
在资源管理器区域聚焦指定的文件
使用上下键选择聚焦的文件或文件夹 使用左右键打开或关闭文件夹或者进入文件
vim 模式：
使用 jk 同上下键
使用 l 同左右键
跳转到指定文件
command + P
打开新的编辑区
command + \
切换不同的编辑区
command + 1
command + 2
关闭聚焦的编辑区
command + k + w
参考资料
- 这是我们团队的开源项目 element3
- 一个支持 vue3 的前端组件库
