DEV Community

Cover image for VS Code Extensions for MERN Stack
Anas Nabil
Anas Nabil

Posted on • Edited on

VS Code Extensions for MERN Stack

  • Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.
    Auto Close Tag

  • Auto Import: Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

  • Auto Rename Tag: Auto rename paired HTML/XML tag.
    Auto Rename Tag

  • Bookmarks: Mark lines and jump to them.
    Bookmarks

  • 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

  • Code Time: Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
    Code Time

  • MongoDB for VS Code: 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: Support for dotenv file syntax.
    DotENV

  • EditorConfig for VS Code: EditorConfig Support for Visual Studio Code.

  • ES7+ React/Redux/React-Native snippets: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

  • ESLint: Integrates ESLint JavaScript into VS Code.

  • filesize: Show the current file size in the status bar.
    filesize

  • GitLens β€” Git supercharged: 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: Simple way to run or debug a single (or multiple) tests from context-menu.

  • Live Server: Launch a development local Server with live reload feature for static & dynamic pages.
    Live Server

  • markdownlint: Markdown linting and style checking for Visual Studio Code.

  • Material Icon Theme: Material Design Icons for Visual Studio Code.
    Folder Icons

  • npm Intellisense: Visual Studio Code plugin that autocompletes npm modules in import statements.
    npm Intellisense

  • One Dark Pro: Atomβ€˜s iconic One Dark theme for Visual Studio Code.
    One Dark Pro

  • Prettier - Code formatter: Code formatter using prettier.

  • React Native Tools: Debugging and integrated commands for React Native.
    React Native Tools

  • 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: REST Client for Visual Studio Code.
    REST Client

  • Settings Sync: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

  • XML Tools: XML Formatting, XQuery, and XPath Tools for Visual Studio Code.

  • Jest: Use Facebook's Jest With Pleasure.
    Jest

  • Path Autocomplete: Provides path completion for visual studio code.
    Path Autocomplete

  • Path Intellisense: Visual Studio Code plugin that autocompletes filenames.
    Path Intellisense

  • Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more: πŸ‘©β€πŸ’»πŸ€– JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.
    Tabnine

  • Vim: Vim emulation for Visual Studio Code.

  • Better Comments: Improve your code commenting by annotating with alert, informational, TODOs, and more!
    Better Comments

  • Code Spell Checker: Spelling checker for source code.
    Code Spell Checker

  • vscode-icons: Icons for Visual Studio Code.
    vscode-icons

  • Angular Snippets (Version 13): Angular version 13 snippets by John Papa.
    Angular 13

  • Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout: 242 Angular Snippets (TypeScript, Html, Angular Material, Flex Layout, ngRx, RxJS, PWA & Testing).
    Angular 10

  • Mocha sidebar: Mocha side bar is the most complete extension for mocha testing, based on not maintained mocha extension , have fun :)

  • ES6 Mocha Snippets: Shortcuts to reduce the amount of boiler plate you need to type when creating a test file using mocha.

  • indent-rainbow: Makes indentation easier to read.
    indent-rainbow

  • TODO Highlight: highlight TODOs, FIXMEs, and any keywords, annotations...
    TODO Highlight

  • VS Code Counter: Count lines of code in many programming languages.
    VS Code Counter

  • CodeSnap: πŸ“· Take beautiful screenshots of your code.
    CodeSnap

  • Color Highlight: Highlight web colors in your editor.

  • Image preview: Shows image preview in the gutter and on hover.
    Image preview

  • JavaScript (ES6) code snippets: Code snippets for JavaScript in ES6 syntax.

  • JavaScript and TypeScript Nightly: Enables typescript@next to power VS Code's built-in JavaScript and TypeScript support.

  • ExpressSnippet: Express Snippets for VS Code.

Top comments (0)