Vscode is a common editor used to write code. It has many functions, but in fact, we don’t use many of them. This article is to comb through some of the techniques that you may not know, but can help you improve your efficiency.
Include:
- Execute NPM scripts with one click
- One-click DIff, preview
- Search on the new page
- Zen mode
- The Git view displays the directory tree
- Open the file in a new editor
- Quickly delete, copy, and move lines while editing
- Search the file globally and jump to a line
- Quick case switching
Execute NPM scripts with one click
Do you need to run NPM scripts on the command line? That’s because you haven’t used vsCode’s built-in feature.
Vscode will scan all NPM scripts and list them. Clicking on run will open terminal to run. In addition, higher versions of VSCode can also run debug directly.
You don’t need to type NPM run XXX at all.
Open the file in the sidebar
When a file is opened, it will be opened in the current editor by default. What if you want to open it in a new editor? At this point, you can hold Down Option and click on the file, and a new editor will open the file.
Because by default VScode always opens a new file in the current editor, it would be a bit of a hassle if you didn’t know that holding down option and clicking can open a new editor.
More powerful search
The search panel has a button that many of you may not have noticed, and when you click it, it opens up the search page to search, and you can preview the search results with more lines.
For example, IF I search @babel/core:
See, it’s more than that little box on the left.
If you look at it, you’ll see that it’s much clearer to search on the right because it shows multiple lines.
File diff Displays directory information
When we change more than one file, it will be listed in the Source Control panel, especially when there are more than one file with the same name.
You can actually switch to a tree view and show the directory tree.
This is much clearer when there are multiple files with the same name:
Editor for a one-click preview of MarkDown
Does Markdown need to install plug-ins? No, vscode itself has this functionality built in.
There is a preview button in the upper right corner. Clicking on it will open the MarkDown preview screen. Holding Down Option and clicking on it will open the preview in the same window.
After you preview, click the Show Source button and it will go back
Edit area one-click diff
Quickly switch between diff and file edit views
When you change the contents of the file, you can click the button in the upper right corner of the edit area to open diff directly. Many students may not notice these buttons, but they are actually very useful.
Click again to return to the edit state
Look at the description of open Changes, Open Files, it is obvious that is used for diff view and file editing view switch.
Diff view quickly jumps between diff views
Finding diff can be tricky when the file is very large, say thousands of lines. In fact, you don’t need to find it yourself, and it’s easy to miss. The vscode editor provides up and down buttons to jump directly to the previous diff and the next diff
One-click preview, one-click DIff, these are all efficiency features.
Quick search function entry
Know vscode has a feature but don’t know where the entry is? Use the search box under Help and the search results will indicate which buttons are under which menu.
Zen mode
Vscode offers a zen mode that lets you focus on writing code.
To enter Zen mode, press Command + K and then z, and press again to exit Zen mode.
In Zen mode, only the information in the edit area is displayed, and it will be full screen. You can’t see anything else, so you can focus more on writing code.
Edit shortcuts
The main function of the editor is editing, but there are a lot of vsCode editing functions that you may not have heard before, so LET me list them.
Line move/copy up and down
What if I move a line up or down?
Cutting and pasting by hand is too inefficient. Try the Option + up/down shortcut to quickly move a line up or down.
Want to copy when you move? Just hold shift again.
Quick deletion of rows
Now that we know how to copy rows quickly, how about deleting rows quickly?
Command + Shift + K.
To delete multiple lines, select first, then press Command + Shift + K.
Multi-cursor editing at the same time
Changing content in more than one place at a time? Hold Option and click where you want to change it.
What if it’s in the same position up and down? So option + command + up/down, which adds the same position cursor for multiple lines.
Comand + Shift + P
This is probably one of the shortcuts that you all know about, where you have a > in the input box that means a command, but there’s something else that you might not know.
For example, if you press Command + p, you don’t press Shift, and you search for files.
For example, press CTRL + G directly, or enter a colon in the input box to represent the following line number to jump, can quickly jump to a line
Of course, you can also add a colon and a line number when searching a file, and quickly jump to that line in the file.
Quick case switching
There is also a small feature that has a built-in uppperCase and lowercase toggle to quickly switch the case of the selected content.
conclusion
This article looks at some of the more effective features in vscode that you may not have noticed.
- One-click DIff, preview
- Search on the new page
- The Git view displays the directory tree
- Execute NPM scripts with one click
- Open the file in a new editor
- Quickly delete, copy, and move lines while editing
- Search the file globally and jump to a line
- Quick case switching
- Zen mode
Familiar with the use of these functions, I believe it will give us daily development to improve some efficiency, learning the use of the tools to write code every day is quite meaningful.