Setting Up VS Code for MERN Development

Visual Studio Code (VS Code) is the most widely used code editor for JavaScript and MERN development. Out of the box it already provides syntax highlighting, IntelliSense, and Git integration. But with the right extensions and settings configured, VS Code becomes a MERN-specific development environment: it catches errors before you run your code, formats your files automatically on save, gives you inline documentation for every npm package, and lets you test API endpoints without leaving the editor. In this lesson you will set up VS Code exactly as experienced MERN developers use it.

Essential VS Code Extensions for MERN #

Recommended VS Code Settings #

// .vscode/settings.json — commit this file to Git for team consistency
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.suggestSelection": "first",
  "editor.inlineSuggest.enabled": true,

  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "node_modules": true,
    ".git": true
  },

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13
}

ESLint Configuration for MERN #

# Install ESLint in your server project
cd server
npm install -D eslint

# Initialise ESLint interactively
npx eslint --init
# Answer:
#   How would you like to use ESLint? → To check syntax and find problems
#   What type of modules? → CommonJS (require/exports)
#   Which framework? → None
#   Does your project use TypeScript? → No
#   Where does your code run? → Node
#   → This creates .eslintrc.json in your project root

// server/.eslintrc.json — recommended MERN server config
{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off",
    "no-undef": "error",
    "semi": ["warn", "always"],
    "eqeqeq": ["error", "always"]
  }
}

Prettier Configuration #

// .prettierrc — place in project root, applies to both client and server
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "endOfLine": "lf"
}

Useful VS Code Keyboard Shortcuts for MERN #

Common Mistakes #

Mistake 1 — Not enabling format on save #

❌ Wrong — manually running Prettier only occasionally leaves inconsistent formatting across files:

// settings.json — format on save is off (default)
{ "editor.formatOnSave": false }

✅ Correct — set formatOnSave to true so every file is automatically formatted the moment you save it:

{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }

Mistake 2 — Installing extensions globally instead of per workspace #

❌ Wrong — every developer manually installs extensions and uses different versions, leading to inconsistent behaviour across the team.

✅ Correct — create a .vscode/extensions.json file listing recommended extensions. VS Code will prompt any developer who opens the project to install them:

// .vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "dsznajder.es7-react-js-snippets",
    "mongodb.mongodb-vscode",
    "rangav.vscode-thunder-client"
  ]
}

Mistake 3 — Ignoring ESLint warnings #

❌ Wrong — dismissing yellow underlines and letting warnings accumulate until the codebase has hundreds of ignored issues:

const token = generateToken(); // ESLint: 'token' is assigned a value but never used
// Developer ignores warning — potential bug hiding in plain sight

✅ Correct — treat ESLint warnings as TODO items. A warning usually means either the code has a bug, or an unused variable should be removed to keep the codebase clean.

Quick Reference #