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.

7. Django

A lot of my work involves backend development with Django. Thus this extension is a must have for me.

8. Docker

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.

10. ENV

Almost every app uses an ENV file for storing secrets and keeping them ....secret. This simple extension makes setting up the ENV file easier.

11. ESLint

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.

14. JavaScript and TypeScript Nightly

JavaScript and TypeScript support for VS Code.

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.

19. Python

As I mentioned earlier, a lot of my work revolves around Django. So having this extension was obvious choice.

20. Tabnine AI Code Completion

My favourite extension out of all. This super intuitive, extremely smart and helpful that writes half of my code for me autocomplete extension. I highly recommend everyone to use as it will make your work easier and better. Supports several languages - JavaScript, Python, TypeScript, PHP, Go, Java, Ruby, C/C++, HTML/CSS, C#, Rust, SQL, Bash, Kotlin, React, Swift, Scala, Sass, Perl, Objective C, Node JS, Matla

(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.

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Atom One Dark",
  "editor.fontSize": 16,
  "editor.fontFamily": "'Jetbrains Mono', 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
  "window.zoomLevel": 1,
  "files.associations": {
    "**/*.html": "html",
    "**/templates/**/*.html": "django-html",
    "**/templates/**/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
  },
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "tabnine.experimentalAutoImports": true
}

Outro

Let me know if you use any of these extensions in the comments.