There’s a lot of text. If you can’t read it, just give it a few giFs and read the text if you’re interested.

preface

  • As the saying goes, to do a good job, you must sharpen your tools
  • As we all know, sharpening a knife is not the fault of cutting wood. With good preparation, we can get twice the result with half the effort.
  • But we’re at work. Let’s think about it. Are there a lot of things that aren’t very comfortable to use when you’re writing code
  • The design is anti-human, the UI is blinding, and the default combinations of shortcut keys are ridiculous. It just doesn’t work.
  • Do we all compromise to accommodate and adapt to these tools, or do we just skip and move on to other editors

The outline

Here are some tips for using vscode. I hope you can sharpen your knives a little bit.

1. The plug-in

2. The code block

3. Shortcut keys (Windows for now)

The plug-in

1.GitLens

  • When you install the GitLens plug-in, a small icon that looks like a branch of a tree appears on the left
  • Below is a small chestnut of the GIF submission code.
    • First, commit the changed code to staging.
    • Then enter the submission information.
    • You can sync it up at the end. Or click push directly below
  • There are so many functions at the bottom, storage, branching, etc… You can count.
  • Nice to use, but the custom command line can also be submitted from vscode’s built-in console
  • Line-history, file-history, etc.

2.Tabnine AI Assistant

  • After installing Tabnine, you won’t see any detailed changes to the interface, but you’ll be able to use smart prompts when writing code.
  • Specific use degree, we will know after experience. Let me start by saying it smells good…

3.Element UI Snippets

  • This plugin is an Element code block prompt (more on this in the code block section).

4.Ant Design Vue helper

  • This plug-in is an ant-Vue code block prompt (more on this in the code block section)

5.vue 6.Vetur

  • Not to mention these two plugins, writing vue2 is basically still necessary

7.postcode

  • This plug-in is postman integrated within vscode
  • This is roughly the same as using Postman (ignore session invalidation below… Just one example)

  • There are a lot of plug-ins I do not introduce, you can take the time to see the function of the plug-in, is their own need to install. There’s a link at the bottom
  • Here are a few extensions

8.comment translate

9.GitHub Copilot — Use the reference link

10. Bully (Not recommended)

11. Front end daily question

12.any rule

The code block

  • Before we talk about code blocks, let’s discuss a problem when we use element or ant-Design-Vue component libraries

  • How to use an input, select, or other component.

  • Manually, switch to the corresponding page CTRL + C, jump to the code CTRL + V

  • Neither of these approaches is very efficient. Let’s look at Element UI Snippets and Ant Design Vue Helper

  • The following GIF is a simple demonstration of the two plug-ins, you can refer to

(By the way, after the Element UI snippets are installed, CTRL + Shift + P opens the shortcut Settings and searches for Insert snippets to insert elementUI blocks.)

  • With the code blocks that come with the plugin, let’s get down to business. After all, the plugin code block still has limitations, but their own on…….
  • Let me show you

  • Notice how advanced this is
  • To keep you in suspense, look at the following design drawing (the most basic background management system). How much work is the evaluation

work

do

The amount

Evaluation of

estimate

In the

.

.

.

.

.

.

.

.

.

.

.

  • Ok, time is up, I believe some people still need an hour or two. Although there are no technical difficulties, but also a little bit of writing
  • Of course, we don’t have to worry about it. The article is not for the bigwigs. Ha, ha, ha.
  • Here’s how powerful blocks of code can be (don’t blink)

  • Doesn’t it help? Imagine that you have to work on the back office every day, and a lot of things are very different. Using this method is not straight spiral to heaven
  • The premise is that you need to write it yourself, and then configure the code that you need
  • Here is a brief explanation:
// Simple example "Print to console": {"scope": "javascript,typescript", "prefix": "ll", "body": [ "console.log($1);", "$2" ], "description": "Log output to console" }Copy the code
  • A couple of points

1: $code block keyword, cursor jump point, code block rendering need to manually add (of course there should be a way to improve, but I did not check)

2: scope, is the scope of the code block, can specify where (vue file, JS file, HTML file, etc., delete scope is global) input instruction is effective.

3: prefix is the code block to execute the instruction, we need to configure

4: Of course, the code block here is you can configure what you want to configure, you can also create a new XXX project code block, only for the project useful

shortcuts

  • This question is an old one, people do development more or less need to use shortcut keys (famous: C, V engineers)
  • I mainly want to say that shortcut keys bring convenience, and as long as you know a set of other software are basically common, common shortcut keys are also basically configurable
  • And I think if you can do things with a keyboard, it’s better not to use a mouse. Efficiency will increase a lot
  • We can consciously create a shortcut key every day, when we want to do something, consciously use the shortcut key, and soon everyone will be familiar with the operation.
  • So every day accumulation, accumulation makes a mickle makes a mickle, behind everyone to see your shortcut keys used (a look that you are a master)

Share some of my favorite vscode shortcuts

  • C, v, x does not speak
  • Alt + Q (formatting code, I configured myself, thought it was easy to match these two, now has been using)
  • Alt + ↑↓ Quickly move the current line of code
  • Alt + ← → Move the point before and after the cursor (to quickly find where you just wrote, shuttling back and forth between templates and scripts in vue is great help)
  • CTRL + B opens the close sidebar
  • CTRL + W closes the current page
  • CTRL + F Search (Basic)
  • CTRL + Shift + F Global search
  • CTRL + D selects the same character
  • CTRL + shfit + n to open a new vscode window
  • Shortcuts must be cultivated consciously
  • Shortcuts must be cultivated consciously
  • Shortcuts must be cultivated consciously

A few commonly used computer shortcuts

  • Alt + W Open/close wechat (self-configurable, default seems to be CTRL + Alt + W)
  • Alt + Q to open/close the pin
  • CTRL + Alt + Z open QQ
  • . These guys aren’t fishing. They’re all for work. I think you get the idea
  • CTRL + Win + ← → Switch desktop
  • CTRL + Win + D Adds a desktop
  • CTRL + Wind + F4 closes the desktop

  • Sorry about that, expand on that, ha ha ha

  • I wonder if you’ve ever seen the desktop in the picture below, and if it looks so much like your own desktop.

  • A lot of stuff on one desktop, multiple editors, multiple browsers, multiple projects… , etc.

  • I suggest you try multiple desktops, each with an editor and a Google.

  • Just press a few shortcut keys above, you can switch projects seamlessly. It also looks a little bit clearer

Finally share a few plug-ins, shortcuts related posts, we are interested in can continue to read ha.

Plugins, shortcuts