DEV Community

Ansh Dhingra
Ansh Dhingra

Posted on

My VS Code Setup

VS Code is one of the best editors out there in the market. And not just for the sake that is launched by Microsoft, it has some really amazing features, the primary one being, allowing developers to install extensions and use as per their requirement.

Why do we need extensions ?

As a developer, you tend to achieve your goals in the minimum time possible. Coding the same 5 lines can be really tiring. That is where extension come in handy. Just 4 words and voilà! the entire syntax is laid out. While some of them autofill the syntax, there are some that provide a variety of themes. As a dark theme lover, I have plenty of them installed in my editor and I shall be sharing them with you!!

Extension I use

Just like you, I have scrolled through various articles and Instagram posts, talking about the top 20 VS Code extensions that every developer must have. Every developer ranks these extensions in the way they like. I did use them and some of them didn't suit me. And that's perfectly alright! Extensions are only a helping hand in making your lives easier. Coding the application and deploying it, is something that only a developer can do and not any extension.
Here are the extensions that you'll find in my VS Code:

Themes and Appearance:

  • Atom One Dark Theme - Mahmoud Ali

Alt Text

  • Ayu - teabyii

Alt Text

  • Community Material Theme - Mattia Astorino

Alt Text

  • Dracula Official - Dracula Theme

Alt Text

  • Helium Icon Theme - Helgard Richard Ferreira

Alt Text

  • Material Icon Theme - Philipp Kief

Alt Text

  • Material Theme Icons - Mattia Astorino

Alt Text

  • One Dark Pro - binaryify

Alt Text

  • One Monokai Theme - Joshua Azemoh

Alt Text

  • Palenight Theme - Olaolu Olawuyi

Alt Text

  • Panda Theme - Panda Theme (one of my favourites!)

Alt Text

Alt Text

A sneek peek in one of my projects with Panda Theme

  • Synthwave'84 - Robb Owen

Alt Text

  • vscode-icons - VSCode Icons Team

Alt Text

Tools and Productivity:

Auto Close Tag - Jun Han

  • This extension automatically adds the closing tag while writing HTML or XML syntax

Alt Text

Auto Import - steoates

  • Probably the most helpful one, this extension automatically generates the import statement, in case you forget to import a snippet and have called it in your code
  • Comes in handy while making TypeScript or React Applications

Alt Text

Auto Rename Tag - Jun Han

  • This extension automatically renames the closing tag when you rename the opening tag.

Alt Text

Auto Open Markdown Preview - hnw

  • While editing README files in your editor, this extension allows you to look at your changes directly in your editor. You can also open the preview in another pane and the changes you make are automatically reflected.

Alt Text

Better Align - wwm

  • This extension allows you to perfectly indent your code without any hassle

Alt Text

Better Comments - Aaron Bond

  • This extension allows you to have beautiful comments in your code. It allows you to add highlights, notes, alerts and much more

Alt Text

Bracket Pair Colorizer - CoenraadS

  • One of the best in the market, this extension highlights matching brackets so that as a developer, you are not confused while closing the wrong type of bracket

Alt Text

Code Time - Software

  • I tend to keep a record of the time I have coded on a particular day and this extension helps me with it. Not only that, but it also provides a detailed analytics of the time spent on a particular file, the total no. of lines coded etc.

Alt Text

ES7 React/Redux/GraphQL/React-Native snippets - dsznajder

  • Being a React developer, this extension helps me whenever I need to write a React Syntax in a file. It automatically generates the function and the import statements, and does much more than that.

Alt Text

Live Server - Ritwick Dey

  • Probably the most talked about, this is a must-have extension since it automatically creates a server for you to view your files. Any changes in your files are automatically reflected in the server.

Alt Text

Path Intellisense - Christian Kohler

  • This extension automatically completes the filenames as you import/export a file.

Alt Text

Prettier - Code Formatter - Prettier

  • Neatly formats your code. It includes support for JavaScript, JSX, Vue, Angular, etc.

Alt Text

React PropTypes Intellisense - Of Human Bondage

  • Finds the type of props in React and automatically generates a snippet to be added in the React Component

Alt Text

Those are all the VS Code extensions that I use. Hope you enjoy my article and have a great time using these helpful extensions :)

Discussion (11)

Collapse
gulajavaministudio profile image
Gulajava Ministudio

Thank you for list in this article. There are another Extension that useful, such as

  • Gitlens
  • Git Graph
  • Path intellisense
  • CodeSnap

and for VS Code theme , you can try Mayukai Theme with good syntax highlighting and many color scheme inside it.

MayukaiTheme

Collapse
pritampatil profile image
Pritam Patil

Thanks for this article. Since long I had been meaning to write about my vscode setup. I have been using most of the extensions you mentioned here.

Adding to this list:

  • Bookmarks (alefragnani.bookmarks): Add bookmarks within a file to navigate easily.
  • Change case (wmaurer.change-case): Easily change case for you function names, variables etc.
  • Color Highlight (naumovs.color-highlight): Highlights colors in your style files
  • Peacock (johnpapa.vscode-peacock): If you have multiple vscode windows open, this helps distinguish between them
  • snippet-creator (nikitakunevich.snippet-creator): if you type a particular line/code over and over again, you can create a snippet out of it using this
  • Tabnine Autocomplete AI: as it says, brings AI power to your code. It learns your coding style and auto-suggests as you type on.
Collapse
malitov profile image
Pavlo Malitov

Tabnine is a must-have item :)

Collapse
tabnine profile image
Tabnine

Agreed :)

Collapse
robole profile image
Rob OLeary • Edited on

The Auto rename tag, auto close tag and auto import extensions are not needed. There are settings in VS Code you can use. You can read my article for more information.

Collapse
hqjs profile image
hq

Live Server is deprecated, try HQ Live Server instead marketplace.visualstudio.com/items... it supports popular frameworks with no configuration required.

Collapse
meetmangukiya7 profile image
Meet Mangukiya

hey bro! what are you doing at university of waterloo master degree or bachelor degree?

Collapse
anshdhinhgra47 profile image
Ansh Dhingra Author

Hey! I am currently doing a bachelor's degree in CS

Collapse
tripol profile image
Ekanem

This is an awesome article. Thanks a lot, you've improved my workflow tremendously

Collapse
ali_dot_ali profile image
Ali Ali

write about atom setup for nodejs dev

Collapse
boopthikumar profile image
boopthikumar

Thanks for sharing! I am using the VS Code as my IDE as well (the version is : 1.48.2) and it is best IDE I have ever used.
Besides for coding, i just want to add one cent on it, It is good for edit document as well, currently all my md (mark down file) are created and edited via VS Code too.