DEV Community

Cover image for 19 VS Code Extensions To Boost Your Productivity πŸš€πŸ”₯
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

19 VS Code Extensions To Boost Your Productivity πŸš€πŸ”₯

VS Code is a free, cross-platform, and open-source code editor that has become the most popular choice among developers in recent years.

It is well-known for its flexibility and customization options, with a thriving ecosystem of extensions that can extend its capabilities and make it even more powerful.

In this article, I've compiled some of the most useful extensions that you can use to boost your productivity. I will provide direct links, descriptions, and images so you can get an initial impression on the fly.


1. Swimm (Sponsored)

Create documentation with Swimm's rich text editor. Document complex flows spanning multiple files and repos with rich content that interact with the code and automatically updates as you make changes.

Validate and update documentation locally and as part of your CI workflow, fixing simple errors automatically and only alerting you with significant changes.

Find the right documentation, at the right time β€” right next to the relevant code. When you see a wave, that means that documentation related to that particular section of code exists.

Create internal documentation with Swimm

2. GitLens

With GitLens, developers can gain better insight into their codebase's history, authorship, and changes by providing advanced visualizations and information about Git repositories.

GitLens also offers a rich set of customization options, as well as inline blame annotations, commit and diff details, and even the ability to view and edit commit messages without leaving the editor.

Commit Graph

3. Thunder Client

Thunder Client is a lightweight Rest API client extension for Visual Studio Code with simple & easy to use UI.

Supports Collections and environment variables & GraphQL queries, as well as script-less testing with a GUI-based interface.

All the requested data is saved locally on your device.

Thunder Client

4. Tabnine

Tabnine is an AI code assistant that will increase your development velocity with real-time code completions in all the most popular coding languages and IDEs.

Tabnine is powered by multiple language-specialized machine-learning models that were pre-trained from the ground up on code.

5. Remote-SSH

The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine.

You can open any folder on the remote machine and work with it just as you would if the folder were on your machine.

Image description

6. Docker

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code.

It also provides one-click debugging of Node.js, Python, and .NET inside a container.

Image description

7. Git History

With this extension, users can easily go through the commit history, inspect file changes, and compare different versions of their code.

The extension provides a GUI that displays the commit history in a timeline. Each commit is displayed together with its commit message, author, date, and time.

Users can also view the branch and tag names associated with each commit.

Image description

8. Markdown All in One

A useful tool for anyone who works with lots of Markdown in VS Code. It makes it easier and faster to create and edit Markdown documents, helping you to be more productive and efficient.

The features include syntax highlighting, code block formatting, table of contents, preview mode, emoji support, keyboard shortcuts, and many more.

Image description

9. Regex Previewer

The extension shows the current regular expression's matches in a side-by-side document. This can be turned on/off with Ctrl+Alt+M.

Global and multiline options can be added for evaluation with a side-by-side document through a status bar entry. This can be useful when the side-by-side document has multiple examples to match.

Regex Previewer in Action

10. Better Comments

With this extension, you will be able to categorize your annotations into alerts, queries, TODOs, highlights, and more.

Commented-out code can also be styled to make it clear the code shouldn't be there. Any other comment styles you'd like can be specified in the settings.

Couldn't use vs code ''better comments extension'' for Python - Stack  Overflow

11. Bookmarks

The Bookmarks extension helps you to navigate your code, moving between important positions easily and quickly.

No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.

Toggle

12. Project Manager

The Project Manager helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.

You can define your Projects (also called Favorites), or choose for auto-detect Git, Mercurial, or SVN repositories, VS Code folders, or any other folder.

Furthermore, you can also organize your projects using Tags.

Side Bar

13. Code Spell Checker

A basic spell checker that works well with code and documents.

The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Example

14. Image Optimizer

Adds a right-click menu to any folder and image in Solution Explorer that lets you automatically optimize all PNG, GIF, and JPEG files in that folder.

Simply right-click any file or folder containing images and click one of the image optimization buttons.

Output window

15. CSS Peek

The extension supports all the normal capabilities of symbol definition tracking but does it for CSS selectors (classes, IDs, and HTML tags).

You can either load the CSS file inline and make quick edits right there, jump directly to the CSS file or open it in a new editor or show the definition in a hover-over.

working

16. Placeholder Images

Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash, LoremFlickr, and more.

You can choose image width, height, text, and colors, insert generated IMG tag into your HTML or copy it to the clipboard or insert the image URL into your HTML, copy to the clipboard, or open it in your browser.

Generating a placeholder image using placehold.it

17. Live Server

A quick development Live Server with live browser reload. Start or Stop the server with a single click from the status bar.

Allows the user to create customizable port numbers, set server root, and comes with default browser configuration options in settings.

Live Server Demo VSCode

18. Peacock

With Peacock, you can subtly change the color of your VS Code workspace.

Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Peacock Windows

19. Polacode

Polacode is an extension of VS Code, which can take screenshots of your code.

The extension generates a screenshot with the same style and theme as its source.

usage


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn, and GitHub!

Visit my Blog for more articles like this.

Top comments (53)

Collapse
 
obere4u profile image
Nwosa Tochukwu

Bookmarked

Please what's like the minimum extension one can install to avoid VSCode from being slow?

Collapse
 
madza profile image
Madza

Thanks a lot for checking them out, Nwosa!

The handful of extensions should not affect the speed that much, unless you have an older low-end machine. I would install some and see it yourself.

Collapse
 
obere4u profile image
Nwosa Tochukwu

My system is 4GB RAM 120SSD core i3... HP ProBook11 G1

Thread Thread
 
madza profile image
Madza

Based on their system requirements, that should be enough to do some coding with extensions installed!

Thread Thread
 
obere4u profile image
Nwosa Tochukwu

Thanks so much for the feedback

Thread Thread
 
madza profile image
Madza

No worries, anytime!

Thread Thread
 
mikej profile image
Mike Johnson

You can see the extension load times in VScode. Do ctrl/cmd + shift + p (open the command palette) and type in Developer: Show Running Extensions

Thread Thread
 
madza profile image
Madza

Thanks for the valuable input! πŸ‘πŸ’―

Collapse
 
richiedadvlpr profile image
Richie Rosario

Install neovim and use lazy.vim to add plug-ins and lsp support and boom you have vscode that's fast and will run on a potato

Collapse
 
obere4u profile image
Nwosa Tochukwu

Can these run on a 4gb RAM 120gb ssd core i3?

Collapse
 
gweaths profile image
Grant

The swimm plugin looks interesting.

Definately agree with your other suggestions.

My most used would be:

  • Todo Tree ⭐⭐⭐⭐⭐
  • Bookmarks ⭐⭐⭐⭐⭐
  • Thunder Client ⚑ ⭐⭐⭐⭐
  • Code Runner ⭐⭐⭐
  • Pretty Typescript Errors ⭐⭐⭐⭐⭐
Collapse
 
madza profile image
Madza

Thanks for checking them out, Grant! πŸ‘πŸ’―

Collapse
 
alchemylab profile image
Luigi Pesce

Nice extension list!

I also use the following extensions:

  • Error lens: Improve highlighting of errors, warnings and other language diagnostics.
  • indent-rainbow: Makes indentation easier to read
  • vscode-color-picker
Collapse
 
madza profile image
Madza

Thanks for the valuable additions, Luigi!

Collapse
 
redhcp profile image
redhcp

I add another's interesting extensions:

Thanks for share @madza

Collapse
 
madza profile image
Madza

Thanks for the valuable additions! πŸ‘πŸ’―

Collapse
 
raguram1991 profile image
RaguRam1991

Bookmarks

Collapse
 
madza profile image
Madza

Thanks for checking this out!

Collapse
 
sugrivlodhi profile image
Sugriv Lodhi

Thanks for spell checker and tabnine

Collapse
 
madza profile image
Madza

My pleasure to share with you!

Collapse
 
sereneding profile image
Serene Ding

that is a fantastic article. Btw what tool do you use to make those gif?

Collapse
 
madza profile image
Madza

Thank you so much!
Most of these visuals were taken from their respective product pages on VS Code marketplace!
Normally I would use Sharex - a free, open-source and lightweight tool and ezgif if necessary to optimize the output.
Some of the other alternatives are also mentioned in the discussion I made a while ago.

Collapse
 
sereneding profile image
Serene Ding

thank you very much!

Thread Thread
 
madza profile image
Madza

My pleasure!

Collapse
 
shree675 profile image
Shreetesh M

These are really good. I especially like the peacock extension, never saw this before. It could come in handy for me.

Collapse
 
madza profile image
Madza

Happy you found the article useful!

Collapse
 
mikej profile image
Mike Johnson

Swimm looks absolutely amazing, thanks for the link

Collapse
 
madza profile image
Madza

My pleasure to share with you! πŸ‘πŸ’―

Collapse
 
sanjuly profile image
Sandra CΓ³rdoba

Excelent, thanksπŸ˜€

Collapse
 
madza profile image
Madza

Glad you liked it, Sandra! πŸ‘πŸ’―

Collapse
 
hb profile image
Henry Boisdequin

I need that code spell checker! Thank you for sharing

Collapse
 
madza profile image
Madza

Yup, saved me countless of times as well! πŸ‘πŸ’―

Collapse
 
riley9594 profile image
riley9594

Thanks

Collapse
 
madza profile image
Madza

My pleasure, thanks for checking out!

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi

Thanks a lot πŸ™Œ

Collapse
 
madza profile image
Madza

My pleasure to share with you, Sarma!

Collapse
 
disturb16 profile image
disturb16

Excellent list. Definitely gona try some of your suggestions

Collapse
 
madza profile image
Madza

Awesome to hear, happy to help! πŸ‘πŸ’―

Collapse
 
mbaneshi profile image
Mehdi Baneshi

Excellent , some tested , some will be tested ,

Collapse
 
madza profile image
Madza

Great to hear they were useful, Mehdi! πŸ‘πŸ’―