9 Tips for Using VSCode Effectively

In the open source IDE market, Visual Studio Code (VSCode for short) has become more and more popular in recent years. Since its release in 2015, according to a 2018 Stack Overflow survey report, 35% of developers have switched to using VSCode. I will introduce some suggestions and techniques to make you use VSCode more efficiently.

Git and Gitlens

Git It can be said that in The most popular software among developers, operating Git directly from the IDE is much easier than through the command line. Git modules can help you perform operations such as stage, commit, stash, and undo. Gitlens Plugins provide more possibilities. The most useful feature of Gitlens is that you can see the commit history of each line of code.

Live Share

##VSCode Live Share is an experimental feature. The official website says this:

No matter what type of application you build, what language you use to program, or what operating system you use, when you need to collaborate, real-time sharing can instantly connect your project with your teammates. shared. Teammates can edit and debug in real time without cloning the repository or setting up its environment.

Through Live Share, you can edit and debug together, and also share audio, servers, terminals, differences, comments, etc. Whether you're conducting code reviews, pair programming with teammates, participating in a Hackathon, or delivering interactive lectures, Live Share can support you in a variety of writing styles.

JSON to Code

Have you ever experienced, when faced with an API, the data you want it to return? Can a structure have a type definition, but don't have to define it manually? Paste JSON as Code You can convert a JSON file into a type definition in the target language with one click.

Batch rename

When writing and maintaining code, refactoring is indispensable, especially when you refactor a very large When there is a large module or a large piece of code, it will be a headache to find and modify the variable/function names one by one. Fortunately, VSCode can help us.

If you select a variable/method name and then press F2, you can edit the selected name and all related instances in the entire project will be modified.

If you only want to modify the current file, use Command F2 (Mac) or Ctrl F2 (Windows).

Jump to definition

When writing code, when faced with a variable/method, one often forgets its reference The meaning of generation. What to do at this time? It will take you several minutes to search the entire project and locate the correct location. In VSCode, you can use Command(Mac)/Ctrl(Windows) and click the corresponding variable/method name, and VSCode will automatically jump to the correct location.

Alternatively, you can place the cursor on the variable/method name and then press Command (Mac)/Ctrl (Windows). The definition of the variable/function will pop up next to the current cursor. This saves you the trouble of jumping to other locations.

Multi-line editing

If you want to insert/delete multiple instances of the same text, you can create a multi-cursor (Multiple cursor). You can hold down the Option (Mac)/Alt (Windows) key, and each time you click, the cursor will stop at its current location. Each click creates a new cursor, and these positions can then be edited simultaneously.

is very useful in HTML, especially when you want to change the class name/hyperlink and it appears in multiple places.

Debugger Debugger itself has a lot of content, and VSCode has a dedicated video introduction.

Youtube video address: VSCode debugging Node.js

Bind shortcut keys

#If you want to work efficiently, make your commonly used commands into shortcut keys. You can quickly view core commands through cheat sheet/ "View shortcut key bindings".

The command console is your best friend, you can use Command p (Mac)/Ctrl p (Windows) to open it. Enter the file name and you can quickly jump to the specified file. This is much faster than searching slowly in the project directory on the left.

● You can enter > to view all available tasks

● Use the @ symbol to get all the Symbols (variables/functions) of the current file /class name/method, etc.)

Custom binding shortcut keys There is a missing command in VSCode, that is "Save All". We can customize one: Command Shift S (Mac)/Ctrl Shift S (Windows).

Recommended tutorial: vscode basic tutorial

9 Tips for Using VSCode Effectively

Related articles