DEV Community

Cover image for Must have Themes and Extensions for every Developers - Visual studio code setup
Hillary Nyakundi
Hillary Nyakundi

Posted on

Must have Themes and Extensions for every Developers - Visual studio code setup

Personally I have been using Visual studio Code since back in 2018, and it has turned out to be one of my all time favorite code editor. The main reason why I like VS code is the ability to customize it to fit your needs, You are able to set it to look the way you will like it by adding your favorite themes, extensions, and even able to share code and even able to do a team work using VS code. As a developer what else would you ask for?
In this article I decided to share some of the most used themes and extensions by developers out there:

Let's Get Started:

Themes

In every bit of honest writing in the world, there is a base theme.

Themes not only changes the setup look but also enhances the user experience and productivity, they also let you give a completely unique look and feel to your editor and setting the right one will get you started to greater productivity.
Most developers prefer Dark themes, Do you?

Extensions

This are what lets you add languages, debuggers and different tools to your setup to support your development work flow.
Here ae some of the most useful extensions for developers:

  • Live Share Alt Text It is an extension that enables real time collaboration between developers. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!
  • Live Server Alt Text This extension is used for launching a development local server with a live reload feature for static and dynamic pages. This saves times for previewing the changes made to your source code by just making the changes in the VS code and saving the file, this will automatically refresh the browser and reflect the changes you have made in it, instead of us manually refreshing the browser page.
  • Code Snapshot Alt Text Ever seen those beautiful code screenshot and ever wonder how they did it? Well this is the extension they use give it a try and change you code screenshot look.
  • Auto rename Tag Alt Text Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  • Code Spell Checker Alt Text It is a basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
  • Code Runner Alt Text It allows you to run code file for multiple languages.
  • Material Icon Theme Alt Text With over 7 million downloads, It gives you an option to customize file icons, folder icons to beautifully designed material icons.
  • Better Comments Alt Text It will help you create more human friendly comments in your code. With this you are able to categorize annotations into:
    • Alerts
    • Queries
    • TODOs
    • Highlights
    • 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
  • Markdown Preview Alt Text This extensions enabled you look how your output will be once you have written it in markdown.
  • ES7 React/Redux/GraphQL/React-Native snippets Alt Text This is one of the best extensions for JavaScript and React/Redux code snippets.
  • VScode-pdf Alt Text It allows you to check and open your pdf right there in your VS Code.

    Fonts

  • Victor mono Alt Text Victor Mono is an open-source monospaced font with optional semi-connected cursive italics and programming symbol ligatures. The typeface is slender, crisp and narrow, with a large x-height and clear punctuation, making it legible and ideal for code. It comes in seven weights and Roman, Italic and Oblique styles.
  • Monoid
  • Ubuntu Mono Alt Text
  • Roboto
  • Press Star 2P Alt Text

    Conclusion

    I hope you’re eager to use these most amazing VS Code Extensions, themes and font to improve your productivity.
    The above listed ones are by far the most preferred, they were selected by comparing the number of downloads, which most have over 2 million downloads, this means most developer use them on daily basis.

If You have read this far I really appreciate, Help me to grow my community:

Also check out my other article on:
7 Best Visual Studio Code Extensions Every Web Developer Should Have.

Connect With me at Twitter | Insta | YouTube | LinkedIn | GitHub

Top comments (9)

Collapse
 
tqbit profile image
tq-bit

You wrote some well curated articles. I don't get how I lived without the bracket pair colorizer from your other collection till now.

There's a few additions I'd like to share here.

  • For the JS users who like the code runner: There's a plugin called Quokka that does about the same thing - it's a scratchpad for JS code.

  • Night Owl is cool, but have you tried New Moon syntax? I'm trying to substitute it with another theme for almost a year but just can't keep my hands away.

  • And what also brought a lot of joy was Fira Code (that font that permits the usage of ligatures,e.g. => as an actual arrow, and stuff). Can be found here (github.com/tonsky/FiraCode),

Collapse
 
larymak profile image
Hillary Nyakundi

Thanks,
Will check the mentioned out for sure, more the Fira code and Quokka.

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Thank you for reference about VS Code Theme and Fonts. I have other reference that maybe you should try.
For theme, i use Mayukai Theme

image
image1

And for font, i prefer Iosevka Font

Collapse
 
larymak profile image
Hillary Nyakundi

Thamks for adding to the list :)

Collapse
 
shaancodes profile image
Shaan Alam

I was never fully satisfied with a particular theme, so few days back I created a theme of my own πŸ˜‚ It's called "Martian Night". And now I am fully satisfied πŸ˜€πŸ˜ƒ

Collapse
 
larymak profile image
Hillary Nyakundi

That's great. Happy for you.
Can we have access to it or ca you show us how it looks?

Collapse
 
shaancodes profile image
Shaan Alam

Yeah sure... I have published the theme on vscode marketplace...you can also download it directly from vscode.

Thread Thread
 
larymak profile image
Hillary Nyakundi

Will check it out for sure.

Collapse
 
aheisleycook profile image
privatecloudev

Good artici3