Darsh Shah
Darsh's Blog

Darsh's Blog

Top VS Code Extensions Every Developer Should Use ๐Ÿ› 

Top VS Code Extensions Every Developer Should Use ๐Ÿ› 

Darsh Shah's photo
Darsh Shah
ยทDec 3, 2020ยท

6 min read

Featured on Hashnode
Featured on daily.dev

Subscribe to my newsletter and never miss my upcoming articles

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. 3.gif

  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

Share this