DEV Community

loading...
Cover image for Top VS Code Extensions Every Developer Should Use πŸ› 

Top VS Code Extensions Every Developer Should Use πŸ› 

iamdarshshah profile image Darsh Shah ・4 min read

Are you looking for the amazing VS Code extensions that will help you be more productive while coding? πŸ€”

If you said Yes, then you're at the right place. In this article, I'll be sharing top VS Code Extensions you must-have for making your life easier. πŸ˜›

What is VS Code? 🀯

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

Why VS Code? 🧐

Microsoft Visual Studio is a premium and most dominant IDE for programming which is profoundly prevalent among engineers.

It contains a plethora of different kinds of tools and features which makes testing and compatibility even easier.

Visual Studio Code is potentially the best JavaScript ide for Windows, Mac, and Linux. Nowadays, VS Code is one of the most popular ides used by developers.

Top VS Code Extensions, you must have 🀩

  1. Better Comments
    The Better Comments extension will help you create more human-friendly comments in your code. If you're the one who loves watching different colored comments, then check it out.
    1.png

  2. Bracket Pair Colorizer
    This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
    2.PNG

  3. Debugger for Chrome
    A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

  4. ES7 React/Redux/GraphQL/React-Native snippets
    This extension will provide you JavaScript and React/Redux snippets in hand. So, no-more doubting your syntaxes. It will help you code quicker and in a more efficient manner. Also, it will save a lot of time while writing imports or react components (just for the sake of example).
    4.PNG

  5. ESLint
    ESLint is a fantastic linter that picks up syntax errors for you to spot problems with your code before you run your code.
    9.PNG

  6. file-icons
    It provides unique file icons to quickly identify file type in the IDE.
    5.png

  7. GitLens β€” Git supercharged
    GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
    6.gif

  8. Import Cost
    This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.
    7.PNG

  9. indent-rainbow
    This extension colorizes the indentation in front of your text alternating four different colors on each step.
    8.png

  10. Live Server
    Launch a local development server with live reload feature for static & dynamic pages.
    10.gif

  11. Path Autocomplete
    Provides path completion for visual studio code. I personally found this extension really helpful.
    11.gif

  12. Prettier
    Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
    12.gif


VS Code Theme I use πŸ’œ

Night Owl by Sarah Drasner
A VS Code theme for the night owls out there. Now introducing Light Owl theme for daytime usage. Decisions were based on meaningful contrast for reading comprehension and for optimal razzle-dazzle. ✨
13.PNG

These are the extensions that I make use of in my day to day work life. Woohoo! We did it! πŸŽ‰

Are you done setting up your VS Code? Obviously, isn't it πŸ‘€

Is there any other extension that you make use of while coding? Please let me know in the comments section.✍️

Thanks, for reading it till the end. πŸ™


Hope you find that helpful! Let me know your thoughts on this in the comments section. Don't forget to share this article with your friends or colleagues. Feel free to connect with me on any of the platforms below! πŸš€

Twitter | LinkedIn | GitHub


Discussion (21)

pic
Editor guide
Collapse
ppezaris profile image
ppezaris

Solid list, especially GitLens and prettier. May I humbly suggest my own company's extension, CodeStream, for consideration. CodeStream is a swiss-army-knife of collaboration, but at it's core it provides code discussion as simple as "select the code, type your comment" with conversations shared through slack, ms teams, email, or just editor-to-editor.

marketplace.visualstudio.com/items...

codestream.com/

Collapse
iamdarshshah profile image
Darsh Shah Author

Hey Peter,

CodeStream seems a super awesome tool to work with. Will surely make use of it. Thanks for letting me know about it. Appreciate thatπŸ‘

Collapse
matrixv01 profile image
Brad Fincher

That looks great. Going to try this now.

Collapse
robole profile image
Rob OLeary

I would be careful with Live Server. The performance of the extension is poor and slows down startup time of VS Code. I wrote about this topic in VS Code Performance – How to Optimize Visual Studio Code and Choose the "Best" Extensions if you'd like to know more. I was considering writing an alternative extension for this reason!

You can see the activation time highlighted below.

live server stats

Collapse
iamdarshshah profile image
Darsh Shah Author

Hey Rob,
Thanks for letting us know about the consequences. That article was really helpful. Let us know more about the alternate extension that you have mentioned. Will surely have a look at it.

Collapse
tomaszs2 profile image
Tomasz Smykowski

Great work! Did you hear about Assistant?

marketplace.visualstudio.com/items...

Collapse
iamdarshshah profile image
Darsh Shah Author

Never heard of it before! I've just checked it and it's a super cool tool & helpful extension one should try. Awesome work, Tomasz :)

Collapse
tomaszs2 profile image
Tomasz Smykowski

Thanks! Chris Young wrote a great blog post with SQL rules he wrote, it is also worth checking out: dev.to/ronsoak/doing-the-impossibl...

Thread Thread
iamdarshshah profile image
Darsh Shah Author

Will surely check it out. Thanks for sharing Tomasz πŸ‘

Thread Thread
tomaszs2 profile image
Tomasz Smykowski

No problem, thanks for your post again

Collapse
srikanth597 profile image
srikanth597

Since you mentioned this No.4 Extension, for which I had some issues with auto importing doesn't work as shown in the GIF(ibb.co/68dfzwS).
Can someone help me? , I couldn't find what is the issue, I am using 1.50.1

Collapse
iamdarshshah profile image
Darsh Shah Author

Hey Srikanth,
As you pointed, ES7 React/Redux/GraphQL/React-Native snippets Extension provides you some code snippets short-hands that you can use to code effectively. It won't help you in auto importing the missing components. You can visit the extension's details page and check out the features it allows you to make use of.

Otherwise, to solve your issue, I would recommend you to check out VS Code & auto import. I hope it will help you achieve what you wanted.

Thanks

Collapse
srikanth597 profile image
srikanth597

I have the Auto import extension as well.
What I want to achieve is that, whenever I use useState snippet from that ES7 etc extension, I want it to be added to React import line automatically.
It used to work exactly how I mentioned a month back, but it doesn't work for me lately, I have to manually import it.

So do u think I can solve this somehow

Thread Thread
iamdarshshah profile image
Darsh Shah Author

Have you checked those links that I shared? Because that should resolve your issue. It should work as expected. If still, you face any issues I would recommend you to open an issue in a respected repository and the team can get back to you with the solution.

Collapse
codebyjustin profile image
Justin

Night Owl Theme :D

Collapse
iamdarshshah profile image
Darsh Shah Author

Indeed! It's just awesome.

Collapse
madza profile image
Madza

Solid list, I use all of them, except theme (personal preference for Atom themes) πŸ˜‰πŸ‘

Collapse
iamdarshshah profile image
Darsh Shah Author

Oh, that's great! :)

Collapse
iamdarshshah profile image
Darsh Shah Author

I'm glad you found it helpfulπŸ‘