DEV Community

Cover image for Top 10 VScode Extensions that I use as a mern developer
Muhammad Ali (Nerdjfpb)
Muhammad Ali (Nerdjfpb)

Posted on • Edited on • Originally published at blog.nerdjfpb.com

Top 10 VScode Extensions that I use as a mern developer

Hi, I am a MERN developer now but I was a LAMP developer before. But now most of the time I work with React & Express. This post is about my code editor. I tried a lot of code editors & IDE’s. But finally, I am sticking with vscode for more than 1year. Today I’ll describe the extensions I use with vscode.

First I want to mention about eslint which really really helps to write better code. But it comes built-in with vscode nowadays. So it doesn’t need to mention but this is a helpful one to writing better JavaScript codes.

Second I love prettier extension which helps me to auto-format my codes and this saves a lot of time. If multiple people work on the same code then I’ll suggest using a config file for prettier. I mostly work alone on my projects so I don’t use it.

I work with react so I need a react extension for making coding easier. I use ES7 React/Redux/GraphQL/React-Native snippets which gives me a lot of benefits and I use .jsx file format so my vscode gives the jsx super easily!

About the CSS part of React JS I normally use sass or styled component. To do it in a better way I use the vscode-styled-components. This just works as exactly I wanted. So this is a daily extension for me.

Sometimes I make some basics websites too. Because Some of my clients need normal landing pages and I don’t use any extra thing over here. Just HTML CSS & vanilla JS. When I work with the HTML I use the live server extension because it really helps with the changing in real-time and really easy to work with!

About the CSS most of the time I use SCSS so I downloaded live sass compiler which works fine and easy to work with!

Now let’s talk about the theme and icon pack. I use SynthWave ’84 for theme and Helium Icon as icons. I tried a lot of different themes but honestly, I didn’t like anything that much. I like SynthWave ’84 because it’s a really cool vibe. Let me know if you use it too!

This is the most used vscode extensions from my end.

Another one I want to mention is a debugger for chrome. But I use it less.

Also if you are just working with the JavaScript then I’ll suggest using jshint too!

Recap

  • Eslint
  • Prettier
  • ES7 React/Redux/GraphQL/React-Native snippets
  • vscode-styled-components
  • live server
  • live sass compiler
  • SynthWave ’84
  • Helium Icon
  • Debugger for chrome
  • jshint

Vscode is amazing and I love to use it.

Let me know which ones you use?

See the instagram version

I’ve started a programming community on discord. Click to join Discord Channel

I've two free PDF for you

Originally it published on nerdjfpbblog.

You can connect with me in twitter or linkedin or instagram !

Top comments (0)