iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

React Editor

By · Reviewed & last updated · Part of React Tutorial

For React, VS Code is the default. A few extensions and settings make the difference between OK and great.

React editor setup

EXAMPLE
# 1. Extensions
# - ESLint, Prettier
# - 'ES7+ React/Redux/React-Native snippets' (rfc, rfce, etc.)
# - 'Pretty TypeScript Errors' (yoavbls.pretty-ts-errors)
# - 'Tailwind CSS IntelliSense' (if using Tailwind)
# - 'Path Intellisense'
# - 'Auto Rename Tag'
# - 'GitLens'
# - 'Error Lens' - inline errors

# 2. Settings (.vscode/settings.json)
{
  'editor.formatOnSave': true,
  'editor.defaultFormatter': 'esbenp.prettier-vscode',
  'editor.codeActionsOnSave': {
    'source.fixAll.eslint': 'explicit',
    'source.organizeImports': 'never'
  },
  'typescript.tsdk': 'node_modules/typescript/lib',
  'typescript.enablePromptUseWorkspaceTsdk': true,
  'typescript.preferences.importModuleSpecifier': 'shortest',
  'typescript.preferences.quoteStyle': 'single',
  'emmet.includeLanguages': { 'typescriptreact': 'html' },
  'tailwindCSS.experimental.classRegex': [
    ['cva\\(([^)]*)\\)', '["\'`]([^"\'`]*).*?["\'`]'],
    ['cn\\(([^)]*)\\)', '["\'`]([^"\'`]*).*?["\'`]']
  ]
}

# 3. Debugging - launch.json
{
  'version': '0.2.0',
  'configurations': [
    {
      'type': 'chrome',
      'request': 'launch',
      'name': 'Vite dev',
      'url': 'http://localhost:5173',
      'webRoot': '${workspaceFolder}/src',
      'sourceMaps': true
    },
    {
      'type': 'node',
      'request': 'launch',
      'name': 'Vitest current file',
      'autoAttachChildProcesses': true,
      'skipFiles': ['<node_internals>/**'],
      'program': '${workspaceRoot}/node_modules/vitest/vitest.mjs',
      'args': ['run', '${relativeFile}']
    }
  ]
}

# 4. Snippets - keep your own
# .vscode/snippets.code-snippets
{
  'React component': {
    'prefix': 'rfc',
    'body': [
      'type ${1:Name}Props = {};',
      'export function ${1:Name}({}: ${1:Name}Props) {',
      '  return (',
      '    <div>$0</div>',
      '  );',
      '}'
    ]
  }
}

# 5. WebStorm alternative
# - Best-in-class refactors, type-aware
# - 'Joinable' files and inspections worth the licence at scale

# 6. Cursor / Continue / Copilot
# - AI-assisted complete and chat - very productive once you trust the diffs
# - Always review before commit; pair with strict typecheck and lint

Why it matters

A tight editor saves more time than any AI tool. Format-on-save + ESLint-on-save + a debugger that actually works covers the daily loop. Snippets earn back their setup cost the first day you reach for one.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// The React editor uses esm.sh + Babel for in-browser JSX.
const App = () => <h1>Hello!</h1>;
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Try it Yourself »

Discussion

Loading…