primers

Explain first, this keyboard man can be not that keyboard man (avoid being beaten). So what is this keyboard guy? The keyboardist means that we can use the keyboard to accomplish our daily development tasks. No mouse, isn’t that cool. Of course, this requires us to remember a lot of shortcut keys, but also need to use plug-ins to help us, this deliberate practice process, I call it the keyboard man to remember.

Learning style

I want to do it a different way this time, because I know it’s boring and not new to put in shortcuts for a few functions, especially if you just read them and forget them. So this time I’m going to take a hands-on approach and see what shortcuts we need to use when we’re actually working on a project. To drive our learning with practical application points. Learn to use, do not use we do not learn. If you type after the passage, I’m sure you’ll remember the shortcuts.

If you want to see the corresponding shortcut directly, you can click on the shortcut key collection in the directory to see all the shortcut keys

Bad border

All that said, we haven’t introduced the development environment we use

Well, I’m a front-end, and I choose vscode

Well, I’m a front-end, and I choose MAC

Well, I think it’s cool to use Vim

So the main environment for this article is MAC + vscode + vim

Of course, some other plugins are needed to help.

  • File Utils
  • JavaScript (ES6) code snippets
  • ES7 React/Redux/GraphQL/React-Native snippets

Of course, in fact, Vocode provides many shortcut keys that can completely replace the functions often used in Vim. I will give the corresponding shortcut keys at the end.

FizzBuzz

So let me just tell you a little bit about today’s project

Write a program to print the numbers 1 through 100. But for multiples of 3, print “Fizz” instead of numbers, and “Buzz” instead of multiples of 5. Print “FizzBuzz” for both multiples of 3 and 5.

The requirements are easy to understand

However, here I use TDD way to achieve, is not wait for that let’s start

New project

mkdir fizzbuzz && code fizzbuzz
Copy the code

The code command opens the folder with vscode

Install code

  1. Open the vscode
  2. Shift + Command + p -> Open the command panel
  3. Input the path

Initialize the project

First we need to initialize our project with NPM and then install the JEST testing framework to help us do TDD

  1. Control + ‘-> open the built-in terminal in vscode
  2. Create package. Json
  3. Install the jest
  4. Install @types/jest (API hint when writing code)
npm init -y && npm i jest && npm i @types/jest -D
Copy the code

Create a file

Next we need to create an index.js file as our entry file. How do you create it with shortcut keys? First we need to use the File Utils plugin.

It allows you to create, move, rename, and delete files or folders using shortcuts

  1. Install File Utils (plugins are omitted)
  2. Open the command panel
  3. Type File: New File
  4. Enter the name of the file to create

Creating a folder

We also need to create the Test folder to hold our test files

  1. Open the command panel
  2. Enter File: New Folder
  3. Enter the name of the folder you want to create

Creates a file in the specified folder

Next we need to create the index.test.js file in the test folder

This is a little tricky, so let me break it down a little bit

  1. Command + Shift + E -> Need to focus on the Explorer area (file area on the left)
  2. Focus on the specified folder (you can use up/down to select the specified file to focus on)
  3. Create file index.test.js

Note here that focusing on the Explorer shortcut may conflict with other software!! When you press a shortcut and it doesn’t work, always check for conflicts

Jumps to the specified file

Next we’ll open the index.test.js file

  1. Command + p -> Go to the file
  2. Enter file name

Generate the test block

First we write a test in the index.test.js file. Here we are going to use ES7 React/story/GraphQL/React – Native plug-in little elder brother to quickly generate the commonly used test code block

  1. Install the ES7 React/story/GraphQL/React – Native

Generates the desc block

  • Input desc

Generate the test block

  • Type test

Open the second edit area

I need to write tests and logic at the same time, so I don’t want to switch files back and forth. Just open an edit area

  1. Command + \ -> Open a new edit area (focus on the new edit area)
  2. Select open the specified file

Select a different edit area

I need to switch to Edit area 1 when I’m writing tests, and to edit area 2 when I’m writing logic

  • Command + 1 -> Switch to edit area 1
  • Command + 2 -> Switch to Edit area 2

Close the edit area

So how do you close an edit area?

  1. Focus on the edit area to close
  2. Command + k + w -> close all files

After closing all files, vscode will automatically close the current edit area

Generate code blocks quickly

To make it easier for us to quickly generate blocks of code that we often use in everyday development, we have the JavaScript (ES6) Code Snippets plugin

  • Install JavaScript (ES6) Code Snippets

You can find many shortcuts for generating code blocks using this plug-in

You can keep a record of what you often use in your daily development.

I’ll show you a few quick ways to generate code blocks in my current project

The import

Now I need to import index.js into index.test.js

The ESModule used here

  • Imp quickly generates imported code blocks

export

Then I need to export a function by default in the index.js file

  • Edf quickly generates a block of code for the default export function

coding

The rest of this is basically about using Vim. I will show this part by recording video, it is too difficult to express in words!! Vscode Keyboard Man Cultivation – Fizzbuzz

First dig a pit when to fill in maybe ha ha ha ha 🙂 escape has filled in can click the video jump to b station to watch

conclusion

We use drive to learn, to combat projects to learn the corresponding shortcut keys. And we do everything with a clear goal. For example, I want to create a File with a shortcut key, so I find the File Utils plugin. For example, I want to quickly generate a block of code that I use frequently, so I find JavaScript (ES6) code snippets, and we use the plugin to do what we want. You can even develop your own plug-in. We will gradually develop a system that will improve over time, and with deliberate practice, everyone can become a qualified keyboard player.

Shortcut key collection

Create a folder on the terminal

mkdir fizzbuzz
Copy the code

Open the folder as vscode

code fizzbuzz
Copy the code

Open a terminal in vscode

control + `
Copy the code

Open the command panel

shift + command + p
Copy the code

Create a file

File Utils needs to be installed

Shift + command + p 2. file: new fileCopy the code

Focus on the resource manager

command + shift + E
Copy the code

Focuses on the specified file in the Explorer area

Use the up/down keys to select the file or folder to focus on. Use the left/right keys to open or close the folder or enter the file

Vim mode:

Use jk with up and down

Use l with the left and right keys

Jumps to the specified file

command + P
Copy the code

Open a new edit area

command + \
Copy the code

Toggle different editing areas

command + 1

command + 2
Copy the code

Close the focus edit area

command + k + w
Copy the code

The resources

  • Advanced VS Code use tips
  • Concise VIM training raiders

  • This is our team’s open source project, Element3
  • A front end component library that supports VUE3