Skip to main content

VS Code Setup for React: Extensions Guide (Part 2)

Configuring Visual Studio Code properly is essential for productive React development. This guide covers installing and setting up VS Code with the critical extensions like Prettier for code formatting, ESLint for linting, and browser debugging tools that professional React developers rely on daily.

Key Takeaways​

  • VS Code is the industry-standard editor for React with powerful built-in features and a massive extension ecosystem
  • Install Prettier for auto-formatting and ESLint for code quality enforcement to maintain consistent, error-free code
  • React Developer Tools browser extension adds component inspection and performance profiling directly to your browser
  • Configure 4 essential keyboard shortcuts in VS Code: Format on Save, auto-close tags, Emmet for JSX, and integrated terminal access
  • A properly configured development environment reduces bugs and increases coding speed by 30–40% for most teams

Choosing Your Code Editor: Visual Studio Code​

Your code editor is your primary workspace as a developer. A well-configured editor can significantly improve your productivity, code quality, and overall development experience. While many excellent code editors exist (Sublime Text, Atom, WebStorm), Visual Studio Code (VS Code) has become the de facto standard for JavaScript and React development because it combines a lightweight footprint with enterprise-grade features.

VS Code, developed by Microsoft, is free, open-source, and highly extensible. According to the 2025 Stack Overflow Developer Survey, VS Code is used by 73% of professional developers surveyed. Here's why it dominates for React:

Why VS Code for React Development?​

VS Code excels in React projects because it offers:

  • Lightweight yet Powerful: Fast startup, responsive UI, yet packed with IntelliSense (intelligent code completion that understands React's JSX syntax), debugging, and Git integration
  • Excellent JavaScript/TypeScript Support: Provides top-tier code intelligence, auto-completion, and refactoring capabilities essential for JSX and modern React patterns
  • Vast Extension Ecosystem: Over 50,000 extensions in the VS Code Marketplace allow you to customize your workflow for any framework, including specialized React tools
  • Integrated Terminal: Run command-line tasks (npm start, git commit) directly within the editor without context switching
  • Active Community & Monthly Updates: Ensures continuous improvement, security patches, and support for emerging tools and standards

Installing and Configuring VS Code​

Download and Installation​

To get started, visit the official VS Code website at https://code.visualstudio.com/ and download the installer for your operating system. Follow the platform-specific instructions:

Windows/macOS: Run the installer and accept the default options. Installation typically completes in under 2 minutes.

Linux (Debian/Ubuntu): Download the .deb package or install via snap:

sudo dpkg -i code_*.deb

After installation, launch VS Code. You'll see a welcome screen with getting-started options.

Essential VS Code Settings for React Coding​

Access settings via File > Preferences > Settings (Windows/Linux) or Code > Preferences > Settings (macOS), or press Ctrl + , (Windows/Linux) / Cmd + , (macOS).

Configure these core settings:

  • Font Size: Set to 16–18 for comfortable reading during long coding sessions
  • Tab Size: Use 2 spaces (the React community standard, used by projects like React itself)
  • Auto Save: Set to afterDelay to prevent losing work
  • Word Wrap: Enable on to prevent horizontal scrolling on long lines
  • Color Theme: Choose from "Dark+", "One Dark Pro", or "Material Theme" based on eye comfort

These settings establish a professional, readable workspace optimized for React development patterns.

Must-Have VS Code Extensions for React​

VS Code's power comes from extensions. To install, click the Extensions icon in the sidebar (or press Ctrl + Shift + X / Cmd + Shift + X), search for the extension name, and click Install.

Code Formatting and Linting​

Prettier - Code Formatter (by Esben Petersen) automatically formats your code to enforce consistent style. This is critical in team projects to eliminate formatting debates and reduce code review time.

Installation steps:

  1. Search and install "Prettier - Code formatter"
  2. In settings, enable "Format On Save"
  3. Set "Default Formatter" to "Prettier - Code formatter"

Result: Every save automatically formats your React components to consistent standards.

ESLint (by Dirk Baeumer) integrates the ESLint static analysis tool into VS Code, catching errors and enforcing best practices in real time. Most modern React projects (created with Vite, Next.js, or Create React App) include .eslintrc.js configuration files automatically.

After installing ESLint, your editor will highlight problematic patterns immediately, reducing bugs before you even run your code.

Syntax Highlighting and Productivity Shortcuts​

ES7+ React/Redux/React-Native snippets (by dsznajder) provides 100+ shortcuts for generating React code. Type rafce (React Arrow Function Component Export) and press Tab to auto-generate:

export const MyComponent = () => {
  return <div></div>;
};

This saves 5–10 seconds per component and ensures consistent naming.

Auto Rename Tag (by Jun Han) automatically renames paired JSX tags. Change <div> to <section> and the closing tag updates instantly, preventing a common React bug source.

Auto Close Tag (by Jun Han) adds closing tags automatically as you type opening tags.

JSX-Specific Productivity​

Emmet (built into VS Code) lets you write JSX faster using CSS-like syntax. Type div>h1+p and press Tab to generate:

<div>
  <h1></h1>
  <p></p>
</div>

To enable Emmet for JSX files, go to settings and add to "Emmet: Include Languages":

javascript -> javascriptreact

This turns you into a JSX typing machine.

Browser Extensions for React Debugging​

Your browser is where React actually runs. Browser extensions extend your browser's developer tools.

React Developer Tools​

React Developer Tools (official, by Meta) is the debugging extension all professional React developers use. It adds two new tabs to your browser's DevTools:

  • Components Tab: Inspect your entire React component tree, view props and state for each component, and temporarily modify them to test behavior
  • Profiler Tab: Record render times and identify performance bottlenecks (e.g., which components re-render unexpectedly)

Installation:

  • Chrome: Search "React Developer Tools" in the Chrome Web Store
  • Firefox: Search "React Developer Tools" in Firefox Add-ons

Once installed, open DevTools (F12 or Cmd + Option + I on macOS) on any React site, and you'll see the Components and Profiler tabs.

Configuration Checklist​

Professional React developers follow this configuration checklist:

  1. Format on Save enabled – Prettier runs automatically on each save
  2. ESLint warnings visible – Red/yellow squiggles appear for code issues
  3. React snippets working – Type rafce and Tab to generate a component
  4. Browser DevTools ready – React Developer Tools tab visible in your browser
  5. Terminal integrated – Open terminal with Ctrl + ` (backtick)
  6. Auto Close Tag enabled – Closing tags add themselves
  7. Git integration active – Source Control sidebar visible and functional

Checking all 7 items ensures you have a professional development environment that matches industry standards.

Best Practices for Development Environment​

Keep your VS Code environment optimal with these practices:

  • Update Regularly: Check for VS Code updates monthly. Extensions auto-update but review changelogs
  • Limit Extensions: Install only extensions you actively use; excessive extensions slow editor startup by 10–20%
  • Master 5 Keyboard Shortcuts: Cmd+Shift+P (command palette), Cmd+P (quick file open), Cmd+/ (toggle comment), Cmd+D (multi-select), Cmd+` (terminal toggle)
  • Use Integrated Terminal: Keep your terminal and editor in the same window for faster context switching
  • Leverage Git Integration: Use VS Code's Source Control panel instead of command line for common operations (stage, commit, push)

Avoid these anti-patterns:

  • Ignoring ESLint Warnings: Linter messages flag real bugs; understand and fix them rather than suppressing them
  • Inconsistent Formatting: In teams, enforce Prettier with identical .prettierrc.json configs to prevent formatting conflicts
  • Outdated Tools: Upgrading Node.js and npm/Yarn every 6 months keeps your toolchain secure and performant

Frequently Asked Questions​

What is the difference between Prettier and ESLint?​

Prettier enforces code formatting (spacing, semicolons, quote style, line length). ESLint enforces code quality (unused variables, missing return statements, best practices). Use both: Prettier keeps code looking consistent, ESLint keeps it bug-free. Most teams configure them to not conflict by disabling Prettier rules in ESLint.

Do I need to install React Developer Tools if I'm just learning React?​

Yes. Even as a beginner, React Developer Tools shows you how the component tree renders, why components re-render, and what props/state each component holds. This visual understanding accelerates learning significantly. Most experienced React developers use it on every single session.

Can I use a different code editor instead of VS Code?​

Yes, alternatives like WebStorm (JetBrains), Vim/Neovim, and Sublime Text work for React. However, VS Code dominates in the React ecosystem: the vast majority of React tutorials, extensions, and community tools are built for VS Code. As a beginner, using VS Code keeps you aligned with the community.

How do I know which VS Code extensions are safe to install?​

Check the extension's download count (aim for 100K+), verify the publisher is established (Microsoft, official projects, developers with long histories), read recent reviews, and check the GitHub repository if available. Avoid extensions with minimal activity or unknown publishers. Quality React extensions typically have 500K+ downloads.

Should I enable Format on Save if I'm still learning JavaScript?​

Yes. Format on Save removes the cognitive burden of manual formatting, letting you focus on logic. Prettier's formatting rules are the JavaScript/React standard, so learning with Prettier-formatted code trains good habits automatically.

Further Reading​

For deeper guidance on VS Code configuration and React development:

Glossary​

VS Code: Free, open-source code editor by Microsoft; the industry standard for React development.

Extension: Add-on that provides additional features to VS Code (formatting, snippets, linting, debugging).

Prettier: Code formatter that automatically enforces consistent style (spacing, semicolons, quotes, line breaks).

ESLint: Static analysis tool (linter) that identifies bugs, style violations, and best-practice issues in JavaScript.

Snippets: Pre-written code blocks triggered by keyboard shortcuts (e.g., type rafce to generate a React component).

Emmet: Editor plugin that expands CSS-like syntax into HTML/JSX code instantly.

React Developer Tools: Official browser extension that adds component inspection and performance profiling to browser DevTools.

IntelliSense: Intelligent code completion that provides context-aware suggestions as you type.

JSX: JavaScript XML syntax for writing HTML-like markup in JavaScript files.