VS Code Setup for React
In this page:
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
# 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 command in your terminal.
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
$ 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 command in your terminal.
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
# 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 command in your terminal.
- Not installing an ESLint extension, missing helpful warnings while typing.
- Skipping Prettier setup and ending up with inconsistent code formatting.
- Not enabling auto-save, leading to lost preview updates while testing.
- 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.
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: