Introduction

In recent years, Visual Studio Code has quickly risen in popularity to become the editor of choice for many programmers. A free and open-source Github project, Visual Studio Code receives contributions from developers all around the world to make it an even more effective text editor for programmers. To help you create and analyze code more quickly, this article will cover the basics and then we dive into the 10 tips to boost your VS Code productivity. So, read on.

Explanation

The debuggers, extensions, integrations, and other capabilities of Visual Studio Code are all designed to help you create code quickly and effectively. However, several secrets might improve your coding experience. In this post, we’ll show you 10 tips to boost your VS Code productivity and make your work easier.

Top 10 Tips of VS Code

Learn how to maximize your productivity in Visual Studio with these time-saving tips and tricks:

1.  VS Code CLI

A command-line interface is a valuable feature of Visual Studio Code that gives you complete command over the editor’s setup process. The command line options let you access project files and directories, install packages, and more. To access a project’s files and directories, we typically right-click the project’s directory and choose Open with Code from the context menu. That does the job, but doing it from the CLI is significantly quicker.

2.  Command Palette

Learning the shortcut for “Ctrl + P” to open the command palette should be your first activity. You can access all of VS Code’s functionality from the keyboard using the command palette, and there’s no need to learn all key combinations. It will automatically display a list of recently accessed files. And, rather than wasting time browsing through folders, you can simply start entering the name of the file you’re looking for to locate it in your project.

3.  Peek Definition

The Peek Definition feature allows you to quickly see how a function or variable is defined without reading the documentation. This button will appear when you move the mouse pointer over the function or variable.

4.  JavaScript Debugger Terminal

There is a built-in terminal in VS Code. Like any other external terminal, just launch it and start typing. You can customize VS Code with various terminal options. You can use the JavaScript Debug Terminal if you like. This terminal runs your usual shell, but if you execute any code written in Node.js, you can see its output in detail.

5.  Emmet Abbreviation

Emmet is an effective tool for creating HTML and CSS code. It has several predefined shortcuts that can be developed into complete code examples. Press “Tab” after typing the acronym. The acronym will be converted into the whole code sample.

6.  Custom Snippets

Writing boilerplate code again and again can be boring. If that’s the case, it’s simple to boost your efficiency by writing your snippets. Using this tip you can make snippets that apply to a specific or all of your projects. You can quickly create your custom boilerplate by modifying the JSON file with the code you wish to enter and then inserting the snippet into the main project.

7.  Quick Fix

Using the Quick Fix function, common programming mistakes can be corrected automatically. Hovering over a red squiggly line and clicking the light bulb symbol will display the suggested solution. You can save time and prevent common code mistakes by doing this.

8.  Pin Project Files

Simply launch Visual Studio Code and head to the left-hand “Explorer” panel to bookmark your project’s files. Then right-click the desired file or folder and choose “Pin to Workspace” from the context menu. A new “Pinned” area will appear at the very top of the Explorer window, where the pinned file or folder will be shown. To remove it, simply right-click the pinned item and pick “Unpin from Workspace”.

9.  Find Symbols with @

Discovering symbols or bits of code hidden throughout the project is another cool thing we can do. If you’re working on a massive file, scrolling around is time-consuming to find the controls you need. If you want to find that specific text on the page, you can use CTRL + F, but the @ symbol in the command palette is far more efficient. By using this you can easily find what you need.

10.  Multiline Editing

When editing numerous lines with the mouse, you may get it a hectic activity. So, hold down the ALT key as you click on various locations in the editor. This will place cursors in many locations. Writing repetitious CSS attributes can significantly benefit from this.

Conclusion

To sum up, VS Code is a strong code editor with various hidden tricks that can improve your coding skills. There is much more to learn as you can download VS Code from here than these 10 tips to boost your VS Code productivity we’ve discussed in this article. So, Happy Coding!