React Development Workflow
VS Code is the most popular editor for React development. This lesson sets up a full React + TypeScript workflow with Vite, ESLint, Prettier, and hot module replacement.
1Scaffolding a React + TypeScript Project
npm create vite@latest my-app -- --template react-ts cd my-app && npm install code .
2Recommended Extensions for React
- ES7+ React/Redux/React-Native snippets —
rafce,useStatesnippets - Simple React Snippets — lightweight alternative
- Tailwind CSS IntelliSense — class name completions
- Auto Rename Tag — renames closing JSX tags automatically
- vscode-styled-components — syntax highlighting for CSS-in-JS
3JSX IntelliSense & Prop Types
TypeScript-based React gives you full prop type checking inline. Hover over any component to see its props. Press Ctrl+Space inside a JSX tag to see all valid props with their types. Missing required props are underlined immediately.
4Debugging React in Chrome
Add the JavaScript Debugger launch config and set "url": "http://localhost:5173". Press F5 to launch Chrome in debug mode. Set breakpoints in .tsx files — VS Code maps them through source maps automatically.
{ "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5173" }
5React DevTools Integration
When debugging in Chrome via VS Code, the React DevTools extension in Chrome stays active. You get the full component tree, props inspector, profiler, and source maps — all linked back to your editor.