Original: medium.com/better-prog...
Translator: Front Ash
To ensure the readability of paper, rather than literal translation.
To read more quality articles please Mengchuo GitHub blog , nearly 100 articles a year of high-quality articles waiting for you!
Note : try it yourself time, Mac (17, pro) with the original language of the keyboard shortcuts are not the same, mac Ctrl corresponding command to be replaced
As front-end developer, most have used a few VSCode, and many are often used. But some shortcuts may VSCode We do not know, is relatively less, after all, that's fine, so this article will list some shortcuts to facilitate learning and memory.
In this article, I will list my favorite shortcuts, these shortcuts let me write code faster, but also make coding more fun, here are 21 VSCode shortcuts, you share.
1. a search of all text files
Windows: Ctrl + Shift + F Mac: Command + Shift + F
VSCode one of my favorite features is the ability of all files in the project directory in the search for any text matching.
To use this feature, you can press Ctrl + Shift + fto open the view, it will display the sidebar on the left side of the Editor:
Finding the input content and the transport, VS code will provide an input matching content list of results, as follows:
You can also simultaneously regulate all match the contents of each file in the search results. If you click on the little arrow on the left, it will pop up a second input box below, where you can enter text to be replaced, and click the small box appears on the right:
2. tabs to set an accent color (Material Theme) is
Are you tired of seeing the same color tabs at the bottom every day? You can use Material Theme to expand the theme VsCode so that tabs can set a different color.
red:
purple
yellow
There are 16 different colors to choose from.
Therefore, if there is chest command panel installing this extension, open ( Ctrl + Shift + P), select Material Theme: Set accent colorand choose a color from the list, it will change the color of the underline tab, as shown below
3. Process Explorer
Do you find your VsCode editor sometimes a little slow? This time you want to eat what process in our memory?
Well, if you do not know, VsCode Process Explorer has a function, as follows:
It is not look familiar?
In the windows task manager seen this in the press in VsCode Ctrl + Alt + Deleteyou can open the Task Manager.
4.Expand Bracket Selection
Open keyboard shortcut ( Ctrl + Shift + P 或 command + Shift + p), search Expand Bracket Selection.
This is what I need to spend some time to find, because I can not guess the name of the function. Use this function to automatically select the entire block, from the beginning to the end braces.
I found this feature you want to find the if/elseend of the block corresponding useful.
5. Reopen closed Edit Page
Windows: Ctrl + Shift + T Mac: command + Shift + T
When you deal with a lot of large-scale project file, if you do not accidentally close a page, and have to search for it again in the side menu, which can be a bit frustrating.
Now, you can press Ctrl + Shift + Tto re-open a closed page.
6. Open the file by matching text
Windows: Ctrl + T Mac: command + T
When it comes to searching for files, you can dynamically search for and open files. This is one of my favorite features, there is no need to manually click to open a directory no longer open the file again.
7. Integrated Terminal
Windows: Ctrl +
Mac: control +
By ** Ctrl + `** can open or close the terminal
8. Check running plug-ins
You can open a command panel ( Ctrl + Shift + P) and enter Show running extensionsto view all plug-ins running your installation.
9. reload
I personally think this is one of the coolest features VsCode. It allows you to put in front of the window when reloading the editor, while having the same closing and reopening the window effect.
Windows: Ctrl + Alt + R Mac: Control + Option + R
10. Tab switching to a different group
In the process I developed, I used to use the tab in the wrong tab group. I also want to avoid as much as possible to use my mouse to solve the problem, because it makes me handle elevation from the keyboard up, I'm lazy, want to put together a hand on the keyboard.
Fortunately, there is a method VSCode by pressing Ctrl + Alt +右箭头(the Mac: Control + Option +右箭头）the label to the right of the group, or by Ctrl + Alt + 左箭头transfer to a separate tag label set (the Mac: Control + Option +左箭头）) to move the tab to the left of the group:
11. Select all the left / right side
Sometimes you want to delete all the contents of the cursor to the right or left. You can select all the contents of the cursor to the right or left. For example, to select all content of the right or left:
Windows: Ctrl + Shift + Home/End Mac: command + Shift + Home/End
Apple notebook not home key, you can use key combinations to achieve
- fn + left arrow key is HOME
- fn + right arrow key is key END
- Fn + direction is the page up key
- fn + next page down direction key is
12. Delete the word
To delete the previous word, press Ctrl + Backspace(Mac: option + delete). This is useful when you have the wrong word.
You can use it in any place other than VsCode.
13. Start Performance
Sometimes, the lack of detailed information about the performance issue is a very painful thing, but also to find out what had performance problems.
Sometimes, if you're lucky, you'll find a tool that can give you all the answers. In VsCode, the start-up performance is very important. That's why you can pop up a useful window, miraculously provide all the information you need:
Open a command panel ( Ctrl + Shift + P), search S tartup Performance.
14. The individually select the text
By shortcuts Ctrl + Shift +右箭头(Mac: option + Shift +右箭头) and Ctrl + Shift +左箭头(Mac: option + Shift + Left Arrow) to select individual text.
15. Repeat rows
A very powerful and known function is to copy the line. Simply press Shift + Alt + 向下箭头(Mac: command + Shift + 向下箭头)
16. Move the file beginning / end
To move the cursor to the first row or the last row, the fastest way is to press the Ctrl + Home( Mac: command + Homebeginning) key, then press Ctrl + End(Mac: command + End) button at the end.
17. Replace the current batch file, all matching text
You can select any set of text, if the selected text appear more, by pressing Ctrl + F2(Mac: command + F2) once to change all the text appears.
18. The up / down one line
Press Alt + 向上箭头(the Mac: command+ 向上箭头) the current row is moved upward, press Alt + 向下箭头(the Mac: command+ 向下箭头)) the current row is moved downward.
19. Delete row
There are two ways you can delete a line immediately.
Use the Ctrl + XCut command ( Mac：command + X) to delete a row.
Or use Ctrl + Shift + K(Mac: command + Shift + K) command.
20. The editor left or right
If you're like me, you may have an uncontrollable desire to want to rearrange tabs in one group, where the tab interrelated, the left side of the tab is more important documents, and the tab on the right is relatively important documents. By Ctrl + Shift + PgUp / PgDown (command + + Shift + PgUp / PgDown) leftward / rightward editor.
21. Copy bulk up or cursor up adding content
Copy the cursor VsCode may prove to be the most time-saving features.
Press Ctrl + Alt +向上箭头(the Mac: Control + Option +向上箭头) Add the cursor to the upper, press Ctrl + Alt +向下箭头(the Mac: Control + Option + 向下箭头) Add the following to the cursor.
After the code is deployed may exist BUG can not know in real time, and afterwards in order to solve these BUG, we spent a lot of time debugging log, here for everyone to recommend a way BUG easy to use monitoring tools Fundebug .
communicate with
Dry series are summarized below, feel good point of a Star, please add the group to learn from each other.
I am a little wisdom, public numbers "big move in the world," the author, to keep learning enthusiasts of front-end technology. I would often share their learned the dry look , the way in advanced, encourage each other!
No public attention, background replies welfare , you can see the benefits, you know.