These vscode tips you may not know can help you improve your development efficiency!

This article will share with you vscode tips that you may not know. It can make you write code more efficiently and help you improve development efficiency. Come and collect it!

vscode is a commonly used editor when we write code. It has many functions, but in fact we don’t use many of them. This article just wants to sort it out. Here are some tips that you may not know but are very helpful in improving your efficiency. [Recommended learning: "vscode tutorial"]

Includes:

• One-click execution of npm scripts
• One-click diff and preview
• Search in a new page
• git view displays directory tree
• Open a file in a new editor
• Quickly delete, copy, and move lines while editing
• Search files globally, jump to a certain line
• Quickly switch case

Execute npm scripts with one click

Execute npm scripts Need to be on the command line? That's because you haven't used this function that comes with vscode.

vscode will scan all npm scripts and list them. Just click run and the terminal will open to run. In addition, higher versions of vscode can also be run with debug directly.

There is no need to enter npm run xxx yourself.

Open a file in the sidebar

When you open a file, it will be opened in the current editor by default. What if you want to open a new editor? At this time, you can hold down option and click on the file, and a new editor will open to open the file.

Because by default vscode opens a new file in the current editor, it is quite troublesome if you don’t know that you can open a new editor by holding down option and clicking.

More powerful search

Search There is a button in this panel that many students may not have noticed. After clicking it, the search page will open to search, and you can preview the search. The results are richer and have more rows.

For example, if I search for @babel/core:

Look, is it better than the small box on the left? Show more here.

You can see by comparison that the search results on the right are clearer because multiple lines will be displayed.

File diff displays directory information

When we change multiple files, they will be listed in the list of the source control panel. When there are multiple files with the same name Particularly unintuitive.

At this time, you can actually switch to tree view to display the directory tree.

When there are multiple files with the same name, this will be much clearer:

Editor One-click preview of markdown

markdown Do I need to install a plug-in? No, vscode itself has this feature built in.

#There is a preview button in the upper right corner. Clicking it will open the markdown preview interface. Press and hold option and click again to open the preview in the same window.

After previewing, click the show source button and you will go back

One-click diff in the editing area

Quickly switch between diff and file editing views

When you change the file content, you can click the button in the upper right corner of the editing area to open the diff directly. Many students may not notice it. These buttons are actually very useful.

Click again to return to the file editing state

Look at the function description open changes and open files, it is obvious It is used to switch between diff view and file editing view.

diff view quickly jumps between diffs

When the file content is particularly large, such as thousands of lines, it is still troublesome to find the diff. of. In fact, you don’t have to look for it yourself, and it’s easy to miss it. The vscode editor provides up and down buttons, which can jump directly to the previous diff and next diff

One-click preview, one-click preview, and one-click preview. Key diff, these are all functions that can improve efficiency.

Quick search function entrance

Know that vscode has a certain function but don’t know where the entrance is? Just use the search box under help, and the search results will directly indicate what buttons are under which menu.

Editing shortcut keys

The main function of the editor is editing, but in fact there are many vscodes. Please use the editing function. Maybe I haven’t, so let me list them.

Move rows up and down/copy

What should I do if I move the content of a row up or down?

#The efficiency of manual cutting and pasting is too low. It is better to try the option up/down shortcut keys to quickly move a line of content up and down.

Want to copy when moving? Just hold shift again.

Quickly delete rows

We know how to quickly copy rows, but what about quickly deleting rows?

Just press command shift k.

If you want to delete multiple lines, select them first and then press command shift k.

Multi-cursor editing at the same time

Modify the content in multiple places at the same time? Just hold down option and click on the place you want to modify.

What if it’s the same location for uplink and downlink? Then use the option command up/down, so that the cursor at the same position is added to multiple lines.

comand shift p Related

This may be a shortcut key that everyone knows. There will be a > in the input box. Following the representatives are commands, but there are some others that you may not know.

#For example, command p directly without pressing shift. At this time, the file is searched.

For example, press ctrl g directly, or enter a colon in the input box, which means that the next line number is the jump line number, and you can quickly jump to a certain line

Of course, you can also add a colon and line number when searching for a file to quickly jump to that line of the file.

Quickly switch case

There is also a small function, with built-in uppercase and lowercase The switching function can quickly switch the uppercase and lowercase of the selected content.

Summary

This article has sorted out some functions in vscode that can improve efficiency. You may not have noticed it.

• One-click diff and preview
• Search on the new page
• Git view displays the directory tree
• One-click execution of npm scripts
• Open the file in a new editor
• Quickly delete, copy, and move lines while editing
• Search files globally and jump to a certain line
• Quickly switch case

Being familiar with the use of these functions, I believe it will improve the efficiency of our daily development. It is quite meaningful to learn the skills of using tools for writing code every day.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of These vscode tips you may not know can help you improve your development efficiency!. For more information, please follow other related articles on the PHP Chinese website!