阅读 2581

vscode键盘侠养成记

引子

先说明一下,此键盘侠可非彼键盘侠(免的挨揍)。那这个键盘侠是什么呢?这个键盘侠是指我们可以用键盘来完成我们日常的开发任务。不用鼠标哦,是不是很酷。当然这需要我们记住大量的快捷键,还需要借助插件来帮助我们,这一刻意练习的过程,我称它为键盘侠养成记。

学习方式

这次我想换个方式来讲解,我知道,要是光秃秃的放几个功能的快捷键使用方式会很枯燥,而且一点也不新颖,尤其是你看完了就完了,忘的一干二净。所以这次我采用实战的方式来讲解,看看我们在实际做一个项目的时候都需要用到哪些快捷键。以实际的应用点来驱动我们学习。学以致用,用不到的我们不学。如果你跟着文章敲一遍的话,我相信这些快捷键你会记得很牢固。

如果你想直接看对应的快捷键的话,可以点击目录上的快捷键集合,查看所有的快捷键

坏境

说了那么多,还没介绍我们使用的开发坏境

嗯,我是一个前端,我选择 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

  1. 打开 vscode
  2. shift + command + p -> 打开命令面板
  3. 输入 path

初始化项目

首先我们需要先用 npm 来初始化我们的项目,然后安装 jest 测试框架来帮助我们做 TDD

  1. control + ` -> 打开 vscode 内置的终端
  2. 创建 package.json
  3. 安装 jest
  4. 安装 @types/jest (在写代码的时候会有 api 提示)
npm init -y && npm i jest && npm i @types/jest -D
复制代码

创建文件

接着我们需要创建一个 index.js 文件作为我们的入口文件。 怎么用快捷键来创建呢?首先我们需要借助 File Utils 这个插件小哥。

它可以让我们用快捷键做一系列的操作:创建、移动、改名、删除文件或者文件夹

  1. 安装 File Utils (安装插件不在赘述)
  2. 打开命令面板
  3. 输入 File: New File
  4. 输入要创建的文件名

创建文件夹

我们还需要创建 test 文件夹来存放我们的测试文件

  1. 打开命令面板
  2. 输入 File: New Folder
  3. 输入要创建的文件夹名

在指定的文件夹下创建文件

接着我们需要在 test 文件夹下创建 index.test.js 文件

这个操作稍微有点麻烦,我先拆分一下操作步骤

  1. command + shift + E -> 需要聚焦到资源管理器区域(左侧的文件区)
  2. 聚焦到指定的文件夹下(可以使用上下键来选择聚焦的指定文件)
  3. 创建文件 index.test.js 文件(具体可以看创建文件,这里不在累赘)

这里要注意聚焦到资源管理器快捷键很有可能和其他的软件冲突!!当你按完快捷键后发现不管用的话千万要记得检查快捷键冲突

跳转到指定文件

接着我们要打开 index.test.js 文件

  1. command + p -> 转至文件
  2. 输入文件名

生成测试代码块

首先我们在 index.test.js 文件内先写一个测试。这里我们要借助 ES7 React/Redux/GraphQL/React-Native 插件小哥来快速生成常用的测试代码块

  1. 安装 ES7 React/Redux/GraphQL/React-Native

生成 desc 代码块

  • 输入 desc

生成 test 代码块

  • 输入 test

打开第二个编辑区

这时候我需要一边写测试一边写逻辑,那么我不想来回切换文件呀 怎么办?在打开一个编辑区就好啦

  1. command + \ -> 新打开一个编辑区(这时候聚焦在新的编辑区上)
  2. 选择打开指定的文件

选择不同的编辑区

当我写测试的时候需要切换到编辑区1,当我写逻辑的时候需要切换到编辑区2

  • command + 1 -> 切换到编辑区1
  • command + 2 -> 切换到编辑区2

关闭编辑区

那怎么关闭某个编辑区呢?

  1. 聚焦到要关闭的编辑区
  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 的前端组件库