Take full advantage of its features and you will feel that VSCode is very powerful!

  • Pro tips for Visual Studio Code to be productive in 2018 👨🏻💻
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

In the open source IDE market, Visual Studio Code(VSCode for short) has become increasingly popular in recent years. Since its release in 2015, 35% of developers have switched to VSCode, according to a 2018 Stack Overflow survey. Here are some tips and tricks to help you use VSCode more effectively.

Git and Gitlens

Git is arguably the most popular software among developers, and it’s much easier to use Git directly from the IDE than from the command line. Git modules help you do stages, commit, Stash, undo, etc. The Gitlens plug-in offers even more possibilities. The most useful feature of Gitlens is that you can see the commit history of each line of code.

The real-time share

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

No matter what type of application you’re building, what language you’re programming in, or what operating system you’re using, real-time sharing instantly shares your project with your teammates when collaboration is needed. Teammates can edit and debug in real time without having to clone the repository or set up its environment. Through Live Share, you can edit and debug together, and Share audio, servers, terminals, differences, and comments. Whether it’s code reviews, pair programming with teammates, Hackathon events, or interactive lectures, Live Share supports you in many ways.

JSON to Code

Have you ever faced an API where you wanted the data structure it returned to have a type definition, but you didn’t have to manually define it yourself? Paste JSON as Code converts a JSON file to a target language type definition with one click.

Batch rename

Refactoring is essential when writing and maintaining code, especially when you are refactoring a large module or chunk of code. Finding and changing variable/function names one by one can be a headache. Fortunately VSCode can help us.

If you select a variable/method name and 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, it’s easy to forget what a variable/method refers to. What do you do at this point? It will take you minutes to search through the project and locate it in the right place. In VSCode, you can use Command(Mac)/Ctrl(Windows) and mouse click on the corresponding variable/method name, VSCode will automatically jump to the correct location.

Alternatively, you can hover the cursor over the variable/method name and press Command(Mac)/Ctrl(Windows) to pop up the variable/function definition next to the current cursor. This saves the trouble of jumping to another location.

Multi-line editor

If you want to insert/delete Multiple instances of the same text, you can create a Multiple cursor. You can hold down the Option(Mac)/Alt(Windows) keys and with each click, the cursor stops at the current location. Each click creates a new cursor, and you can then edit these positions simultaneously. Useful in HTML, especially if you want to change the class name/hyperlink and it appears in multiple places.

Debugger

Debugger itself has a lot of content, VSCode has a video dedicated to it.

Youtube video address: VSCode debugging node.js

Bind shortcut key



If you want to be productive, make shortcuts to your most common commands. You can go throughcheat sheet/ View Shortcut key bindings to quickly view core commands.

The Command console is your best friend and you can open it using Command+ P (Mac)/Ctrl+ P (Windows). Enter the file name and you can quickly jump to the specified file. This is much faster than digging through the projects directory on the left.

  • You can type in>To view all available tasks
  • with@Symbols to get all Symbols of the current file (variables/functions/class names/methods, etc.)

Custom binding shortcut keys

There is one command missing in VSCode, which is “save all”. We can customize one: Command+Shift+S(Mac)/Ctrl+Shift+S(Windows).

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!

Copyright statement

Fundebug



Blog.fundebug.com/2019/03/26/…

Are your users experiencing bugs?

Experience the Demo
Free to use