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
复制代码

参考资料

• VS Code 高级使用技巧整理
• 简明 VIM 练级攻略

---

• 这是咱们团队的开源项目 element3
• 一个支持 vue3 的前端组件库