My VS Code setup for fullstack development 🎨
My personal VS Code setup with extensions and other utilities for MERN Stack Development.
5 min read
Having a good productive environment boosts up your productivity 10 times. Having a good IDE / code editor with the proper extensions/plugins can allow you to get your work done faster and make your work simpler if done right. I have personally spent hours to find the right setup for my work so as to maximise my productivity as much as possible and keep it distraction free.
VS Code is an extremely popular free code editor by Microsoft that has become the gold standard for the dev community over the past couple of years. What makes it super powerful and amazing is its bunch of free extensions that allows its user to bend it to their needs and get the maximum out of it. However having too much extensions can be bad as well since each of these extensions is going to take up some RAM on your PC when your fire up the editor. So you need to have just the right extensions that you need and want in order to level up your game.
I primarily work with React, Node Express and Django for my projects and thus I am going to share the list of extensions and settings that I have set up for my use case.
1. Atom One Dark Theme
First and foremost, as soon as you open your VS Code, the first thing you are always going to notice is your theme. A good theme goes a long way in helping you maintain focus. My favourite is Atom One Dark Theme.
2. Auto Import
Big projects have lots of files and importing-exporting theme can become hectic at times. To simplify that I use the Auto Import extension that automatically handles most of it.
3. Auto Rename Tag
A superb extension when working with HTML or JSX. Finds the compatible closing tag and automatically updates it with the changes in the opening tag.
4. Better Comments
Better comments goes long ways to improve the code quality and setting up reminders, to-do's or just alert your teammates. Its simple and easy to use.
5. Code Runner
A very useful extensions that allows running codes with a single click - no commands needed.
6. Debugger for Chrome
A super useful extension for debugging frontend apps. Debugging frontend apps can become quite hectic with simple console.logs. Chrome debugger comes to the rescue to help us out.
A lot of my work involves backend development with Django. Thus this extension is a must have for me.
Dockers are very powerful and very useful. Most of my backend apps are dockerized. This extension is very useful if you like to use Dockers as much as I do.
9. EditorConfig for VS Code
A standard Editor Config allows you to maintain uniformity across multiple devices for a given project. If you are not familiar with editor configs, read more about them here . VS Code requires this extension to work with editor config files.
Almost every app uses an ENV file for storing secrets and keeping them ....secret. This simple extension makes setting up the ENV file easier.
This extension integrates ESLint into your VS Code and helps you find your mistakes before you go live.
12. Git History
Every developer worth their salt uses Git. When working with several branches and multiple files, this extension comes as a gift from code and saves a lot of time tracking your git history.
13. HTML CSS Support
Extremely useful extension when working on frontend.
15. Live Server
Probably the most popular frontend dev extension. Extremely useful when working with simple HTML pages.
16. Material Icon Theme
A good icon theme helps you customize a better look for your editor. I prefer the Material Theme.
17. npm Intellisense
Visual Studio Code plugin that autocompletes npm modules in import statements.
18. Prettier - Code formatter
An opionionated code formatter that helps you to keep your code clean and your state of mind cleaner. Never worry about tab spaces and proper indentation again.
As I mentioned earlier, a lot of my work revolves around Django. So having this extension was obvious choice.
20. Tabnine AI Code Completion
(Note that at the time of writing this article, Github Copilot is in beta testing. I have high hopes for that as well. But as of now, Tabnine reigns supreme.)
21. Simple React Snippets
Simple and useful react snippets that help me a lot in writing quick React code.
My settings.json file.
Here's my settings.json file for reference.
Let me know if you use any of these extensions in the comments.