DEV Community

Cover image for 10 Essential VS Code Tips & Tricks For Greater Productivity
Safdar Ali
Safdar Ali

Posted on

10 Essential VS Code Tips & Tricks For Greater Productivity

Did you know that 73% of developers worldwide depend on the same code editor?

Yes, the 2023 Stack Overflow Developer Survey results are in, and yet again, Visual Studio Code was by far the most used development environment.

“Visual Studio Code remains the preferred IDE across all developers, increasing its use among those learning to code compared to professional developers”

“Visual Studio Code remains the preferred IDE across all developers, increasing its use among those learning to code compared to professional developers” - Stack Overflow Developer Survey 2023

And we all know why: it’s awesome.

But are we fully exploring its potential? In this article, we unfold some compelling VS Code features that enhance productivity with local source control, animated typing, and rapid line deletion, amongst others. Let's start using them to achieve our coding goals faster than ever.

1. Timeline View: Local Source Control

The Timeline view gives us built-in source control.

Many of us know how useful Git and other source control tools are, helping us easily track file changes and revert back to a previous point when needed.

The Timeline view in VS Code provides an automatically updated timeline of important events related to a file, such as Git commits, file saves, and test runs. This feature ensures that you can always keep track of your code's history without leaving the editor.

2. Integrated Terminal

One of the most powerful features of VS Code is the integrated terminal. You can run commands, scripts, and even full development servers directly within the editor. This eliminates the need to switch between the editor and a separate terminal application, streamlining your workflow.

To open the terminal, you can use the shortcut:


Ctrl + `
Enter fullscreen mode Exit fullscreen mode

3. Extensions Marketplace

The VS Code Extensions Marketplace offers a vast array of tools that can significantly boost your productivity. From linters and formatters to themes and language support, there's an extension for almost everything.

Some must-have extensions include:

  • Prettier for code formatting
  • ESLint for JavaScript linting
  • Live Server for a quick development server
  • GitLens for enhanced Git capabilities

4. Multi-Root Workspaces

VS Code supports multi-root workspaces, allowing you to work on multiple projects simultaneously within a single window. This is particularly useful if you're working on related projects or microservices.

To add folders to your workspace, go to:

File > Add Folder to Workspace...
Enter fullscreen mode Exit fullscreen mode

5. IntelliSense

IntelliSense is a powerful code completion tool that provides smart completions based on variable types, function definitions, and imported modules. This feature can drastically speed up your coding by reducing the amount of typing and preventing errors.

6. Emmet Abbreviations

Emmet is a shorthand syntax that helps you write HTML and CSS quickly. For example, typing div.container>ul>li*5 and pressing Tab will expand to:

<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

This can save a lot of time when writing repetitive structures.

7. Command Palette

The Command Palette provides quick access to many functions and commands in VS Code. You can open it by pressing:

Ctrl + Shift + P
Enter fullscreen mode Exit fullscreen mode

From here, you can search for and execute commands, making it a powerful tool for boosting productivity.

8. Snippets

Snippets are predefined templates that make it easier to enter repetitive code patterns. You can create custom snippets or use pre-made ones. For instance, typing for and pressing Tab can expand to a for-loop structure, saving you from typing it out each time.

9. Bracket Pair Colorization

Bracket pair colorization helps you keep track of matching brackets in your code. This is particularly useful in languages with complex nested structures. You can enable this feature by installing the "Bracket Pair Colorizer" extension.

10. Debugging

VS Code comes with built-in debugging support for several programming languages. You can set breakpoints, inspect variables, and step through your code directly within the editor. This makes finding and fixing bugs much faster and more intuitive.

To start debugging, you can use the shortcut:

F5
Enter fullscreen mode Exit fullscreen mode

Conclusion

Visual Studio Code is packed with features that can enhance your productivity and make coding more efficient. By fully leveraging these tools, you can streamline your workflow, reduce context switching, and focus more on writing great code. Whether you're a seasoned developer or just starting out, these tips and tricks can help you get the most out of VS Code. So, dive in, explore these features, and elevate your coding experience!

That's all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 24547! 🤗

Top comments (8)

Collapse
 
ashleyd480 profile image
Ashley D

Love this @safdarali. I have found that Prettier is so helpful to get my brackets aligned- kudos to my mentor for showing me that. I never knew that shortcut for starting a debug session with F5. Super cool! Great idea too for the Bracket Colorization tool too- I get lost with my brackets so that would definitely be handy! 🤗

Collapse
 
igavelyuk profile image
Igor Gavelyuk

Be careful with any prettiers, sometime they can ruin code and you even not notice.

Collapse
 
ashleyd480 profile image
Ashley D

Thank you my friend @igavelyuk for the callout. That is good to know. ❤️

Collapse
 
damadorpl profile image
Krzysztof Radzikowski

9 bracket colorization is in core VSCode for over a year. You don't need extension for it

Collapse
 
whattheportal profile image
WTP | WhatThePortal.com

The one thing holding us back from going full VS code and off of WebStorm is the search-all context window.

It's hard to give up searching, finding, editing, linting, and formatting all from a search box!

Collapse
 
erickrodrcodes profile image
Erick Rodriguez

Bro, this is out of the box. Show me something like, how to tweak the JS debugging terminal. I can't avoid to think this is a ChatGPT article.

Collapse
 
igavelyuk profile image
Igor Gavelyuk

I believe PULSAR still uses a lot of people. Is missing from list. Yes it is kind of Atom, but it not an Atom ⚛️.
A Community-led Hyper-Hackable Text Editor

Some comments may only be visible to logged-in visitors. Sign in to view all comments.