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:
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.
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.
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.
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:
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
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.
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.
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.
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.
This article has sorted out some functions in vscode that can improve efficiency. You may not have noticed it.
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
