引子
先说明一下,此键盘侠可非彼键盘侠(免的挨揍)。那这个键盘侠是什么呢?这个键盘侠是指我们可以用键盘来完成我们日常的开发任务。不用鼠标哦,是不是很酷。当然这需要我们记住大量的快捷键,还需要借助插件来帮助我们,这一刻意练习的过程,我称它为键盘侠养成记。
学习方式
这次我想换个方式来讲解,我知道,要是光秃秃的放几个功能的快捷键使用方式会很枯燥,而且一点也不新颖,尤其是你看完了就完了,忘的一干二净。所以这次我采用实战的方式来讲解,看看我们在实际做一个项目的时候都需要用到哪些快捷键。以实际的应用点来驱动我们学习。学以致用,用不到的我们不学。如果你跟着文章敲一遍的话,我相信这些快捷键你会记得很牢固。
如果你想直接看对应的快捷键的话,可以点击目录上的快捷键集合,查看所有的快捷键
坏境
说了那么多,还没介绍我们使用的开发坏境
嗯,我是一个前端,我选择 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 的前端组件库