Visual Studio Code: Tips and Tricks to Boost Your Productivity

Visual Studio Code is one of the most popular integrated development environments globally. In fact, according to Stack Overflow’s 2021 Developer Survey, 71% of developers prefer VS Code over others, including Visual Studio (33.03%), Notepad++ (29.71%), and IntelliJ (28.74%).

Whether you are just starting with the tool or have experience developing with it, discover some of the best Visual Studio tips and tricks to help you navigate it and boost your productivity to the roof.

What makes Microsoft’s VS Code so popular

Several aspects factor into its popularity: it’s open-source, it can be used by any developer in practically every language on any device, it’s multi-platform, easy to extend, and it has a wide variety of integrations, allowing users to do virtually anything. Not to mention it offers awesome VS Code extensions.

Additionally, developers create new plugins every day, which means you can easily get extra functionality.

According to Microsoft, the tool has over 14 million users every month, 5 million of them gained only in the last year. The reason for this is the 2022 VS Code upgrade, which added a few exciting features to the tool, including:

• An updated dark theme with improved accessibility, color contrast, and accent, better aligned with Microsoft’s design language, available for download as well as an extension. These features have already made this theme the most popular in VS.
• Additional font options in the editor, including Cascadia Code and Cascadia Mono. The latter is now also set as a default font.

Apart from developers, VS Code is also an excellent tool for designers, especially since last October, when Microsoft partnered with Adobe and released an Adobe XD extension, which allows designers to put together design packages for developers in their company.

15 Shortcuts to Save Time and Be More Productive

Among the many Visual Studio code best practices developers abide by when it comes to boosting their productivity, shortcuts are undoubtedly one of the most convenient and easy to adopt. There are dozens of shortcuts available on VS Code, but here are the ones we recommend:

1. Quick Open

This shortcut helps open files quickly. After that, use the arrows on your keyboard to find the file. Once you select the one you had, tap the right arrow key.

Windows: CTRL+P

Mac: CMD+P

2. Command Palette

The command palette can simplify accessing your commands when you need them. Instead of going from menu to menu, you can just use the shortcut and type a keyword related to the command you are looking for.

Windows: CTRL+SHIFT+P

Mac: CMD+SHIFT+P

3. Multi-Select Cursor

The multi-select cursor is a great tool to precisely select multiple items at the same time. This can be especially useful when you need, for example, to change all the H3s to H4s. Once you select the first H3, use the shortcut and it will find every H3 title and provide an active cursor to take further action.

Windows: CTRL+D

Mac: CMD+D

4. Toggle Sidebar

Using the full width of the editor can be useful at times. For cases like these, the toggle sidebar is a great solution. You can use it to show or hide the sidebar and get the entire width of the editor.

Windows: CTRL+B

Mac: CMD+B

5. Copy Line

Copying and pasting lines is common among developers and one of the most efficient visual studio tips and tricks. For this reason, having a shortcut to help simplify this process is key.

Windows: SHIFT+ALT+UP or SHIFT+ALT+DOWN

Mac: OPT+SHIFT+UP or OPT+SHIFT+DOWN

6. Comment Code Block

Commenting code blocks is necessary when you are modifying code or tracking a bug and because it’s so common, shortcuts can be extremely useful.

Windows: SHIFT+ALT+A (Multi-line comment), CTRL+K+C (Single-line comment)

Mac: SHIFT+OPT+A

7. Go back / move forward

Move quickly between one location and another using this practical shortcut.

Windows: ALT+ —> or + –>

Mac: ^-

8. Show All Symbols

This shortcut can be handy to see all the functions, classes, files, and other symbols. Using this shortcut, you’ll get a reference view showing all the symbols.

Windows: CTRL+T

Mac: CMD+T

9. Trigger suggestion and parameter hints

The suggestion box generally covers only the previous code line to show or remove trigger suggestions and trigger parameter hints fast.

Windows: Ctrl+Space, Ctrl+Shift+Space

Mac: CMD+Space, CMD+Shift+Space

10. Show References

This shortcut is a great way to check references during a context switch and make changes whenever necessary.

Windows: Shift+F12

Mac: Shift+F12

11. Global Find

In the same way that the Toggle sidebar shortcut can show or hide a sidebar, the Global Find shortcut hides or shows the Global Find sidebar.

Windows: CTRL+SHIFT+F

Mac: CMD+SHIFT+F

12. Close all open editor tabs

If you want to clear all your tabs, this is the shortcut you need to use. This way, you can change the context or start fresh.

Mac: CMD + K + W

Windows/Linux: CTRL + K + W

13. Formatting the entire file

You can format the entire active file or install a Formatter extension with this tool.

Mac: Shift + Option + F

Windows: Windows Shift + Alt + F

14. Add cursors to all matching selections

Multi-cursors are an easy way to replace text or add more text without copying and pasting it or changing each text individually, one at a time.

Mac: CMD + SHIFT + L

Windows/Linux: CTRL + SHIFT + L

15. Go to a specific line

This shortcut does exactly what it says: it takes you to a specific document line, which is a great way of fixing specific lines provided by error stack traces.

Mac: CTRL + G

Windows/Linux: CTRL + G

You can access the VS Code shortcut list for Windows here and for Mac here.

VS Code Productivity Tips: 15 Must-Have Extensions

One of the greatest benefits of using VS Code, as we mentioned, is the wide variety of extensions the tool offers that can suit every possible need a developer might have and provide a helpful solution.

Today, VS Code supports more than 30,000 extensions, which gives you a wide variety of options but can also be overwhelming. For this reason, here are 15 awesome VS Code extensions you should get to boost your productivity:

1. Settings Sync

This extension can save a lot of time in the future. Instead of setting up your text editor every time you change your computer, this extension can do it for you.

Get Settings Sync in the VSMarketplace

2. ESLint

This extension is excellent and a must for any developer working in VS Code. Essentially, it identifies errors and helps speed up the development process, and it can be beneficial for developers who collaborate.

Get ESLint in the VS Marketplace

3. Live Share

Another great extension for any developer, especially those that work remotely, is Live Share. You can share your text editor with anyone in the world, which is a great way of collaborating and peer reviewing code whenever possible. Not only does it share code, but it can also share the built-in terminal and a server running locally.

Get Live Share in  the VS Marketplace

4. GitHub Repository Manager

When it comes to VS Code tips and tricks, GitHub Repository Manager can be a real asset to help you save time. It allows you to access all your Github repositories and clone them simply by double-clicking on them. You can also switch between repositories.

Get GitHub Repository Manager in  the VS Marketplace

5. Live Server

This is great for front-end developers because it automatically refreshes your browser, allowing you to see changes as soon as they happen, which can also save a lot of time.

Get Live Server in the VS Marketplace

6. Quicktype

For developers who use TypeScript, Quicktype is a great extension. It can help you speed up the writing process of your interfaces: just provide a JSON input file, and the extension will generate the interface for you.

Get Quicktype in the VS Marketplace

7. Simple React Snippets

A great extension for React developers, Simple React Snippets provides shortcuts to help speed things, creating components, importing files, etc.

Get Simple React Snippets in the VS Marketplace

8. Prettier

This is great for any developer because it helps organize code, eliminating unnecessary indents and spaces, making it easier to read. The “Autoformat on Save” feature is excellent and will spare you the time to format your code once you are done.

Get Prettier in the VS Marketplace

9. JavaScript (ES6) Code Snippets

This extension provides several different JavaScript extensions that can be extremely helpful for developers who work with this language.

Get JavaScript (ES6) Code Snippets in the VS Marketplace

10. GitHub Copilot

GitHub Copilot can be a great assistant and help you select useful code snippets to add. However, remember that sometimes it can suggest a few unusual and maybe even outrageous things because it works with artificial intelligence.

Get GitHub Copilot in the VS Marketplace

11. Live Preview

This extension saves time and improves productivity because it places a browser inside your VS Code, so you don’t have to change windows while coding.

Get Live Preview in the VS  Marketplace

12. EditorConfig

Consistency in code, especially when collaborating with at least another developer, is hard to get. This extension solves this problem by enforcing similar rules across one repository and automatically fixing and adjusting code to those specific rules.

Get EditorConfig in the VS Marketplace

13. CSS Peek

If you are unsure whether the CSS class has the properties you want and does what you think, CSS Peek can be a great tool to figure out. By hovering over the class name, you can see the class properties and make sure you select the right one.

Get CSS Peek in the VS Marketplace

14. HTML End Tag Labels

This extension is great because it helps with readability. If you use many closing </div> tags, it will add comments to let you know which divs close which section.

Get HTML End Tag Labels in the VS Marketplace

15. Bracket Pair Colorizer 2

Complex coding can include too many brackets, and it’s easy to keep track of them and even forget to close one or two. To help solve this issue, this extension highlights open and closing brackets and makes it visually easy to notice any mistakes.

Get Bracket Pair Colorizer 2 in the VS Marketplace 

Indent-Rainbow provides a similar service but highlights indents instead. You can download it here.

BONUS EXTENSION: WakaTime

Developers spend hours in front of their computer coding, and many lose track of their time in this activity. If you want to know, WakaTime can help. This extraordinary tool measures coding time per project.

Get WakaTime in the Marketplace

‍

Other Useful VS Code Productivity Tips

1. Take Advantage of the Integrated Terminal

VS’ integrated terminal can be used directly in the environment and works exactly like any other terminal. To use it, simply use the ⌃` keyboard shortcut with the backtick character, use the View > Terminal menu command, and from the Command Palette (shift+cmd+p), use the View: Toggle Integrated Terminal command.

2. Set a Working Project Folder

Having to take info from specific files and folders constantly can be time-consuming. By having a working project folder, you can easily access all your files and subfolders without having to access the file explorer.

3. Workspaces Are Your Friends

Multi-root workspaces can be extremely helpful if you work on several related projects simultaneously. It’s a great way of separating your private projects from the rest. This will spare you having to handle several windows at the same time.

4. Make Your Code Snippets

You can use several code snippets available, but no snippet would be as valuable as one you put together yourself to suit your specific needs and the pieces of code you use more frequently.

To create your code snippet, simply:

1. Head to Preferences/User Snippets. You’ll see a list and choose the type of snippet you want (global snippet for either a specific project or for all projects, or specific for a language).
2. Write the code snippet. Bear in mind that “scope” defines the language or project it will be used in, “prefix” refers to the shorthand you will use to identify the snippet, and “body” is the code snippet injected. Finally, the description explains what the snippet does.

Consider these tools, tips, and tricks to take advantage of VS Code and start improving your productivity levels today!