Like is power 💪, attention is support 👊! Suggestions, questions and topics are welcome in the comments section!
I’ve used a lot of code editors before, from NotePad++ and SublimeText to PHPStorm and finally VSCode. I went through a lot of configuration, plugins and themes with each editor. A developer’s editor is like a knife in a knife, a gun in a gun. A good accessory can greatly enhance our combat effectiveness.
So for a good programmer, a good code editor can play a great role in the development process can bring us a lot of convenience, help, efficiency and influence. Even a good editor can bring a greater sense of joy to daily programming.
A gunslinger selects a gun based on several dimensions: weight, knockdown power, bullet count and accuracy, among others. That’s also true for developers. We’ll consider the editor’s plugins, extensibility, compatibility, functionality, aesthetics, shortcuts, and so on.
The one we care about the most is:
- “How many useful plug-ins bring us ease and efficiency of development?”
- “Compatible with our programming language”
- “Is there a definition or method jump that lets me navigate to methods, variables, and functions in complex code?”
- “Code should be comfortable to look at, code highlighting should be beautiful and easy to look at.”
- “There are commonly used shortcuts to make development more efficient (preferably without me using a mouse)”
🌟 to summarize: “Let’s write code faster, more fun, and more comfortable.”
“Beginning” frontier
In order to teach you how to use VSCode effectively, there are three main sections:shortcuts.The plug-inandconfiguration. Because it’s so much,So I have divided it into three articles for you to study.(Interested in children’s shoes can pay attention to oh 😁)
This article mainly explains the common shortcuts of VSCode in detail, so that you can write code in VSCode, more smoothly, basically without the mouse.
By basically remembering these common shortcuts, we can instantly improve our efficiency with VSCode, and also speed up our code writing!
Let’s become senior VSCode players together!
“One” editor used
Let’s start with the shortcuts for using the editor functions, which will make it easier and easier to use some of VSCode’s common functions. You can also use these shortcuts to uncover more of the editor’s hidden features.
Shortcut list to View “View Shortcut”
If you want to see all the shortcuts, you can use the following shortcuts:
Mac: Command + K, then Command + S
Linux/Windows: Ctrl + K, then Ctrl + S
🌟 If you want to quickly view a specific shortcut key, enter search in the search bar at the top of the shortcut key list
Quick Open file
Can be used to quickly search and open files in a project, which is useful when you want to open a code file in a large project.
Mac:
Command+PLinux/Windows: Ctrl + P
🌟 tip
- The input
?Check out the help documentation- The most recently opened files are listed first in the search
- If you want to open multiple files, there are two methods :(new files will be opened behind, search will not be turned off)
- Open a new file Mac:
Option+-Or Linux/Windows:Alt+-- Multi-window open Mac:
Command+-Or Linux/Windows:Ctrl+-
Editor Command “Command Palette”
The command is invoked by prefixing the search with >. Editor command can do a lot, you can quickly search for shortcuts, but also the execution of some plug-in commands, very practical oh!
Mac:
Command+PLinux/Windows: Ctrl + P
🌟 tip
You can also search for buttons in this way if you want a quick shortcut.
Split Editor
During development, we often open several files and edit them at the same time, especially if highly packaged code is changing multiple files at the same time.
Not to mention the front end, where most of the time we’re editing HTML, CSS, and JavaScript files at the same time.
When writing a Vue, the HTML and CSS are all in one file, the code is very long, split the current file in the same editor, then slide to the HTML, CSS and script parts can be changed at the same time.
Mac:
Command+\或者2,3,4Windows:
Shift+Alt+\或者2,3,4Linux:
Shift+Alt+\或者2,3,4
Editor Grid Layout
By default, editor groups are arranged in vertical columns (for example, when you split an editor, the default is to split horizontally to the right-hand side). However, many times when you split multiple editors, you find that the width of each editor becomes narrower and narrower, resulting in a decrease in visibility. At this point we want to use a grid layout. So we can use the editor’s 2×2 grid layout.
First we need to create an empty editor group: open view > Editor Layout > 2×2 Grid:
By default, close the editor group last editor will shut down the entire team, next time to use, need to open a grid layout, but we can be in setting. The json change in the configuration of the workbench. The editor. CloseEmptyGroups: false.
Quickly open and close the Sidebar “Opening and Closing the Sidebar”
When we’re focused on programming, the left sidebar takes up a certain amount of width, especially if we’re using dual screens (especially vertical screens) or split editor mode. Making the sidebar go saved us a lot of space.
Mac:
Command+BWindows/Linux:
Ctrl+B
Quickly Open integration Terminal “Open New Terminal”
In the process of development, we often need to use the terminal to execute commands. Opening the terminal quickly will bring us a lot of convenience.
Mac:
Control+ `Windows/Linux:
Ctrl+ `
Second, assist code writing
Next, let’s talk about auxiliary keys that are commonly used in programming. These shortcuts help us write code faster and more efficiently, keeping our hands on the keyboard and reducing the time spent switching between the keyboard and mouse.
Merge row “Join Line”
Mac: Control + J
Linux/Windows: use the shortcut keys described above to open the shortcut keys query list, search for “joinLines” (editor.action.joinlines), place your mouse over the shortcut keys of the joinLines, and click the edit icon.
Code Formatting
This shortcut helps you quickly adjust code reduction, but I recommend using the Prettier plugin later in this article.
Mac:
Shift+Option+FWindows: Shift + Alt + F
Linux: Ctrl + Shift + I
Clear extra Space “Trim Trailing White Space”
This command helps us to keep track of excess whitespace before and after code, which will help us reduce excess whitespace errors if our project has a strict Lint specification.
Mac:
Command+KCommand+XWindows/Linux: Ctrl + K Ctrl + X
🌟 tip
This function can be performed automatically, we do not need to select a clear, we can set the automatic clear in VSCode configuration. Here are two configurations.
Use the Settings. The json
- Open the
Editor command(Mac:Command+P/ Windows:Ctrl+P) - Enter in the search box
> Open SettingsAnd then selectPreferences: Open Settings (JSON) - And then settings.confg
"files.trimTrailingWhitespace": trueIf the configuration already exists, make sure the value istrue. - Save the file to take effect (if it doesn’t take effect immediately, restart VSCode)
Use visual (UI) Settings
- Open the
Editor command(Mac:Command+P/ Windows:Ctrl+P) - Enter in the search box
> Open SettingsAnd then selectPreferences: Turn on Settings (UI) - in
Text editor>fileFound in theTrim Trailling WhitespaceAnd check (we can also type in the search box directlyTrim Trailling WhitespaceQuickly find the location of this configuration), see the screenshot below.
Code Folding “Code Folding”
In development projects, many times the front-end code grows in a single file, making it difficult to focus on one section or find a single piece of code. Usually at this point we fold up some of the code that is not important. But using the mouse to click one click at a time is inefficient. The code collapse shortcut is very useful in this case.
Collapse code shortcut key
Mac:
Command+Option+[Windows/linux:
Ctrl+Shift+[
Expand code shortcuts
Mac:
Command+Option+]Windows/linux:
Ctrl+Shift+]
Copy Line Up/Down
When writing code, we often write very similar code several times in a row or copy it and change it slightly. This is especially true when importing packages like require or import in JS. If we need to select a row and then copy it, press Enter and then paste, that’s not fast enough. Is there a faster way to copy it? Some!
Mac:
Shift+Option+⬆️ / ⬇️Windows:
Shift+Alt+⬆️ / ⬇️Linux:
Ctrl+Shift+Alt+⬆️ / ⬇️
Of course, if you don’t like the default shortcut, you can change it in the shortcut list.
Select the Word “Select Word”
Many times during development, we will need to change the same word (multiple variable names) simultaneously, either a word in a local method or a word with the same name in this file. The older approach is to do global search and replace.
There is a faster and easier method in VSCode that allows you to select locally or quickly select all. You can modify the selected word at the same time.
Local choice
First select the word you want and then press the following shortcut key:
Mac:
Command+DWindows/Linux:
Ctrl+D
If we press the shortcut key multiple times, the editor will continue to find the same word and select it automatically.
Global select
First select the word you want and then press the shortcut key:
Mac:
Command+Shift+LWindows/Linux:
Ctrl+Shift+L
The only difference here is that this will find all the same words under the current file and select it.
Navigate to a Specific Line
A common shortcut to error detection is to find a specific line of code under the current file.
Mac:
Command+GWindows/Linux:
Ctrl+G
🌟 Tips Based on what we learned above, we can also use the shortcut key (Mac: Command + P) to open the editor Command and then type: and then enter the number of lines.
“Go to Symbol in File”
I’ll show you what a symbol is. It’s a method, a class, or an attribute in your code.
So in a large code file, this shortcut can be very useful. Allows us to quickly find the method, property, or class we want to edit!
Mac:
Command+Shift+OWindows/Linux:
Ctrl+Shift+O
🌟 tip
If there are too many symbols in the file, we can put: after the @ sign, and then we can sort all the symbols and make it easier to find the symbols and positions we need.
Jump specific Symbol in the project “Go to Symbol in Workspace”
This shortcut is the same as a jump in a file, except that it can search the entire project for methods, classes, and properties, and quickly jump to those symbols.
Mac:
Command+TWindows/Linux:
Ctrl+T
Delete the entire Word “Delete Previous Word”
When we mistype a word, we often press delete repeatedly until we want to start over. In fact, for us programmers, typing is fast, re-typing is far faster than deleting a letter. (Some people may also use the mouse to select the deleted word, in fact, when writing code, do not use the mouse as much as possible, so that it will be faster.)
Mac:
Command+DeleteWindows/Linux:
Ctrl+Backspace
Select “Select by words” by word
In order to program without using the mouse, we often need to select a few words in a line of code, and this shortcut allows us to do this quickly.
Mac:
Command+Shift+← / →Windows/Linux:
Ctrl+Shift+← / →
Duplicate Line quick copy of current Line
Anyone who has used an IDE will be familiar with this operation, which quickly copies down the current line of code. This is also very useful in programming.
In fact, we can select a piece of code, press the shortcut key and copy the entire content down.
Mac:
Command+Shift+DWindows/Linux:
Ctrl+Shift+D
Deleting a Line
Used to quickly delete an entire line of code.
Mac:
Command+XWindows/Linux:
Ctrl+X
Edit “Add Cursor Above/Below”
Those of you who have used SublimeText will be familiar with this feature. We can add mouse edit points in multiple locations and then edit at the same time. VSCode also has this shortcut.
Mac:
Command+Option+↑ / ↓Windows/Linux:
Ctrl+Alt+↑ / ↓
🌟 tip
If you want to add the edit mouse button in front of the word of the property, you can jump to the end of all the property names, just add the edit mouse button in front of all the names and use the shortcut key:
Mac: Command + – >
Windows/Linux: Ctrl + – >
Edit Column Selection while selecting multiple rows
This shortcut key needs to be used with the mouse. This shortcut is especially useful when you’re writing code and you’re editing a bunch of code.
We can also hold down the shortcut key and select the position we want to change at the same time, and then edit multiple mouse positions at the same time.
Mac:
Shift+OptionWindows/Linux:
Shift+Alt
Rename Symbol Rename Symbol
By default, VSCode supports JavaScript and TypeScript notation changes for method names, class names, and property names. After modification, references to these symbols in the file are automatically modified simultaneously. Support for other languages requires plug-ins.
Mac:
F2Windows/Linux:
F2
Summary of “to be continued”
Here I’ve covered all the common keyboard shortcuts and tips for using the editor. Many people who need to learn shortcuts can’t use them and remember them all at once. Tips: So you can collect this article, when needed, you can search for it and use it immediately. When we use it a lot, practice makes perfect.
Once we get used to using these shortcuts, we will find that our code writing speed will improve.
In the next post, I’ll explain all the common VSCode plugins (including front-end/back-end), so stay tuned!
Good article recommendation
- 🔥 8 HTML+CSS Tips to See on the Front End – CSS is a very unique language. It looks very simple, but a particular effect that looks simple is very difficult to implement. The purpose of this article is to share some new CSS tricks for kids on the front end, things that are not covered in front end tutorials and training classes. The second is to rekindle the love and enthusiasm for front end layout and special effects for those who are still in front end development. 🔥
- 🔥 7 Benefits of Learning to program for those of you who want to and are learning to program — Choosing to learn to program can be life-changing. Maybe a lot of people learn to program at first and sign up for a programming class in order to get a higher salary or a better working environment. Finally stick to stick to, we will find that programming will also bring us a lot of personal ability and skill improvement.
- 🔥 5 Rules to Be a Better Developer — This article teaches us 5 rules to be a better developer, how to stand out from the crowd, and how to help us in our tech careers.
- 🔥 “Write Better Code with the principle of” Easy to Adapt “– novice and experienced developers alike often ask the question,” How to write good code?” To know how to write good code, we first need to know what good code is. You must have a clear goal in order to know how to achieve it. The “ETC Principle” mentioned in The “How to Be a Programmer” — the easy to adapt Principle. This principle seems simple, but the more we think about it, the more we realize that simplicity is not simple.
This article is formatted using MDNICE