← Back to React Course | Chapter 1: Environment Setup & Tooling | Lesson 10 of 10

VS Code Setup for React

Setting up your editor for React is like sharpening your pencils before you start drawing -- it makes everything after it easier.

In this page:

  1. Recommended VS Code Extensions
  2. Enabling Auto-Format on Save
  3. Using the Built-in Terminal

Recommended VS Code Extensions

For React work, the ES7+ React/Redux/React-Native snippets extension adds handy JSX shortcuts, and the built-in JavaScript/TypeScript support already understands JSX syntax without extra setup.

Note: Type rafce in a new component file with the snippets extension installed to auto-generate a function component template.
Warning: Some older React snippet extensions generate class-component boilerplate by default -- prefer ones (or settings) that generate function components, which is the modern default.

Example: Installing the React Snippets Extension

bash 
# Install from the terminal (VS Code's `code` command must be on PATH)
code --install-extension dsznajder.es7-react-js-snippets

# Or from VS Code: Ctrl+Shift+X (Cmd+Shift+X on Mac), search
# "ES7+ React/Redux/React-Native snippets", click Install

⚠️ Run this in your own terminal or Node.js environment.

Enabling Auto-Format on Save

Installing Prettier's VS Code extension and enabling 'Format on Save' automatically reformats your JSX/JS to a consistent style every time you save the file.

Note: Add a .prettierrc file to a project to share consistent formatting rules with teammates instead of relying on everyone's personal editor settings.
Warning: Auto-format on save can silently fix code you were mid-way through typing if you save accidentally -- expect occasional reformatting while you get used to it.

Example: Setting Up Prettier and Format on Save

bash 
$ code --install-extension esbenp.prettier-vscode

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

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

⚠️ Run this in your own terminal or Node.js environment.

Using the Built-in Terminal

VS Code's integrated terminal (View > Terminal) lets you run npm commands like npm run dev without leaving the editor window.

Note: Split the terminal panel to keep the dev server running in one pane while running other commands in another.
Warning: Closing the integrated terminal panel while a dev server is running usually also stops that server.

Example: Opening the Terminal and Starting the Dev Server

bash 
# Open the integrated terminal
# Windows/Linux: Ctrl + `
# Mac: Cmd + `

$ npm run dev
  VITE v5.0.0  ready in 320 ms
  ➜  Local:   http://localhost:5173/

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Code Splitting with React.lazy · Understanding npm Scripts · Your First Component · React Developer Tools Extension

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Not installing an ESLint extension, missing helpful warnings while typing.
  2. Skipping Prettier setup and ending up with inconsistent code formatting.
  3. Not enabling auto-save, leading to lost preview updates while testing.
Chapter Summary
  • VS Code is the most popular editor for React development.
  • The ESLint extension surfaces code-quality issues directly in the editor.
  • The Prettier extension auto-formats code consistently.
  • Extensions like ES7+ React snippets speed up writing common component patterns.
Browser Support

Not applicable -- editor setup is a development-time concern.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Understanding npm Scripts Next Lesson → Introduction to JSX

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.