Share 8 tips to improve VScode development efficiency

vscode is free, open source, lightweight, fast, powerful, and smart prompts have made it popular all over the world. In this article, let us learn eight tips of VScode to improve development efficiency, so that your development efficiency will be up up up!

1. Press ctrl K, then press ctrl S to view the shortcut key list.

If you want to see the shortcut keys for a certain operation, you don’t need to read the official documentation. You just need to call up the shortcut key list and search for what you want in the search bar above. operation, you can get the corresponding shortcut key combination.

2. Press ctrl P, the search bar will pop up, directly enter keywords to search for specific symbols in all files:

in all Search for the "employee" keyword in the file

Enter "@" in front of the search bar to search for specific symbols in the current file:

Search for the "employee" keyword in the currently open file

Enter ">" in front of the search bar and search for all available commands. For example, I want to use the spring initializr extended command to create a Maven project:

Search for "spring initializr: Generate a Maven Project" command

3. When reading code, you often need to switch between different files, and this will appear For the phenomenon of "looking at this and forgetting that", we can download the Bookmarks plug-in in the plug-in market to help you mark and find a certain piece of code faster.

Use the knowledge in the second item, ctrl P, then enter ">", enter the plug-in name, and view the command of the plug-in:

Mark lines 36-38 of the code in the figure

Select the command Toggle Labeled (mark and name the tag), and after naming it "getId", when we are in another file, we can Search the tag directly and jump to the mark~

Select Bookmarks: List from All Files to display your tags

See the code block we just marked~Enter key to jump directly~

Recommended learning : "vscode tutorial"

4. Right-click on a function or variable to view its definition and reference without moving the current code position.

Right click and click peek definition

The definition of the attribute will pop up

Similarly, you can also look at this function or variable Where it is referenced: Select "peek reference"

View the reference location of the variable

Pop up the reference location of the variable

5. Use the combination of ctrl = and ctrl - to zoom.

When you feel that the current font is a bit small, unclear, or a bit too big, you don’t have to get confused in the settings menu bar. You only need to use the above two key combinations to zoom.

Enlarge

Reduce

6. Use Paste Json As Code extension to copy and paste The posted json file is directly serialized into code.

Example:

The following json file:

json file

Serialized into Java code:

Open the command panel directly and enter the command Paste Json As Code That’s it, very convenient.

7. Use the Gitlens extension with up to 12 million installations to help you better collaborate on code and view code change history.

Combined with GitLens, the code author will appear on the code you clone from github. The specific time of code commit:

You can see that the author Greg Turnquist committed the code change three times ago

Click the newly appeared "Toggle File Blame Annotation" button in the upper right corner to compare and show the difference between your code and the original repo:

Click on the change icon

Check the difference between your changed code and the original version

The left side of the dividing line is the original repo. On the right is our changed code. We can see the specific code author and commit time.

In the action bar on the left, a new GitLens icon appears. After clicking it, you can view the branch, master, and commit information in detail:

Yes You can see the entire commit history of the current repo, as well as the author's github avatar. Click on a modification history and you can directly see all the differences between the modification and the code before modification.

8. The finale: Microsoft’s main revolutionary development extension: VS Live Share. With the support of this extension, you can complete real remote real-time code collaborative development with your colleagues, and the other party does not need to After the entire project is cloned, you only need to connect to the session you opened, and you and he can develop and modify a file.

Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless of what programming languages ​​you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions recieve all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
VS live share allows you to edit and debug code in real time with your collaborators, no matter what language you are using or what type of development you are developing application. It allows you to share your current project in real time and securely, and if needed, even share debugging sessions, command line examples, local web applications, voice calls, and more! Developers participating in the meeting can receive all editing content (such as language services, debugging) from your environment, ensuring that participants can collaborate efficiently without having to clone the project code and install development packages.

It is easy to use, install the extension:

##enable the extension, reload your VScode, and then see Go to the Live Share icon in the lower left corner:

Jump to the browser page:

Use our GitHub account Log in (you can also use a Microsoft account).

Then return to our VS live share interface, you can see:

Real-time Code Salon

I am the only one, so how can I make it work? Are others involved?

   
Click the icon

Every live code meeting held has a website address, which is the url address. Click this button and the address will automatically enter your clipboard , you only need to send this URL to your colleague, and your colleague enters this URL in the browser:

You can see this code The real-time conference is held by me , and then directly click Open Live Share for VS Code that pops up automatically, and your VScode will automatically start. After opening, you have entered the real-time meeting of the code, and can start sharing the entire project with everyone, and even use voice call to communicate with them in real time. Communicate via voice and enjoy the fun of collaborative code development together.

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

The above is the detailed content of Share 8 tips to improve VScode development efficiency. For more information, please follow other related articles on the PHP Chinese website!