VS Code Extensions for MERN Stack
Tags: vscode, reactnative, mongodb, node
Published: 2022-07-25 12:56:00

- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag): Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.
![Auto Close Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jecckcqvhy61vx13vxdf.gif)

- [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport): Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag): Auto rename paired HTML/XML tag.
![Auto Rename Tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtd664jgelphlg642hr7.gif)

- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks): Mark lines and jump to them.
![Bookmarks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi7kh6udi9k27npvez5f.png)

- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner): Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim.
![Code Runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toenqbbuzbtb4v9q3nqo.gif)

- [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode): Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
![Code Time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prtkklaqtdt2duk2bse0.png)

- [MongoDB for VS Code](https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode): Connect to MongoDB and Atlas directly from your VS Code environment, navigate your databases and collections, inspect your schema and use playgrounds to prototype queries and aggregations.

- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv): Support for dotenv file syntax.
![DotENV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2blmpqj3173s3hc3vfb.png)

- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): EditorConfig Support for Visual Studio Code.

- [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets): Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): Integrates ESLint JavaScript into VS Code.

- [filesize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize): Show the current file size in the status bar.
![filesize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jemkqn2edag6ztzstqdo.jpg)

- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

- [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner): Simple way to run or debug a single (or multiple) tests from context-menu.



- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer): Launch a development local Server with live reload feature for static & dynamic pages.
![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32dtn912lf2n53wtevu.gif)

- [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint): Markdown linting and style checking for Visual Studio Code.

- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme): Material Design Icons for Visual Studio Code.
![Folder Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2nqofc8yve1qxqdik84.png)

- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense): Visual Studio Code plugin that autocompletes npm modules in import statements.
![npm Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v31zaujm6qc1bk7j1kc.gif)

- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme): Atom‘s iconic One Dark theme for Visual Studio Code.
![One Dark Pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d10m9h7rhjv6hxgfxcba.png)

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Code formatter using prettier.

- [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native): Debugging and integrated commands for React Native.
![React Native Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zcc3cf28t1yufng3hm4.gif)

- [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl): Open any folder in the Windows Subsystem for Linux (WSL) and take advantage of Visual Studio Code's full feature set.

- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client): REST Client for Visual Studio Code.
![REST Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lc9mzipldhrvgccd3plo.gif)



- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync): Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

- [XML Tools](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml): XML Formatting, XQuery, and XPath Tools for Visual Studio Code.

- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest): Use Facebook's Jest With Pleasure.
![Jest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q91hyt0lb865iq14z9x2.png)

- [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete): Provides path completion for visual studio code.
![Path Autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k37wb5iptzbjzxdseml2.gif)

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense): Visual Studio Code plugin that autocompletes filenames.
![Path Intellisense](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vernl9nmcqdio8kvyt2l.gif)

- [Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode): 👩‍💻🤖 JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.
![Tabnine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q89pujy3rtcd8xmiwdt8.gif)

- [Vim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim): Vim emulation for Visual Studio Code.

- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments): Improve your code commenting by annotating with alert, informational, TODOs, and more!
![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6n0ou3qu3obeny3k1fr.png)

- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker): Spelling checker for source code.
![Code Spell Checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d72ddt0vm4cufdpi80h.gif)

- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons): Icons for Visual Studio Code.
![vscode-icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbmzv9po02gzlbecns81.gif)

- [Angular Snippets (Version 13)](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2): Angular version 13 snippets by John Papa.
![Angular 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs8hrjhn98beo4tjvglp.gif)

- [Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout](https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode): 242 Angular Snippets (TypeScript, Html, Angular Material, Flex Layout, ngRx, RxJS, PWA & Testing).
![Angular 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub3y0i6yyzz0892cx3tj.gif)

- [Mocha sidebar](https://marketplace.visualstudio.com/items?itemName=maty.vscode-mocha-sidebar): Mocha side bar is the most complete extension for mocha testing, based on not maintained mocha extension , have fun :)



- [ES6 Mocha Snippets](https://marketplace.visualstudio.com/items?itemName=spoonscen.es6-mocha-snippets): Shortcuts to reduce the amount of boiler plate you need to type when creating a test file using mocha.

- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow): Makes indentation easier to read.
![indent-rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugslln2yaznexitjfg4s.png)

- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight): highlight TODOs, FIXMEs, and any keywords, annotations...
![TODO Highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jq4bglhmv1vekxjjio6.png)

- [VS Code Counter](https://marketplace.visualstudio.com/items?itemName=uctakeoff.vscode-counter): Count lines of code in many programming languages.
![VS Code Counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ucn5vzweergysilaxzr.gif)

- [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap): 📷 Take beautiful screenshots of your code.
![CodeSnap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idtdksfazezpopfdgj1r.png)

- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight): Highlight web colors in your editor.

- [Image preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview): Shows image preview in the gutter and on hover.
![Image preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/liww60lo4b6vz9ktcxf2.png)

- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets): Code snippets for JavaScript in ES6 syntax.

- [JavaScript and TypeScript Nightly](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next): Enables typescript@next to power VS Code's built-in JavaScript and TypeScript support.

- [ExpressSnippet](https://marketplace.visualstudio.com/items?itemName=vladmrnv.expresssnippet): Express Snippets for VS Code.