Guide
Choose & Configure an IDE
Step-by-step setup for VS Code (recommended) or JetBrains: extensions, formatting, terminal, debugging, and Git integration.
Process 01Download & Install
- VS Code: Download from code.visualstudio.com (recommended). Enable settings sync and auto-updates.
- JetBrains: If you prefer, get the student license for IntelliJ/CLion/PyCharm.
Process 02Core Extensions
- AI: GitHub Copilot (Education Pack).
- Quality: ESLint + Prettier; Tailwind/CSS IntelliSense; React/TS snippets.
- DevOps: GitLens, Docker, Markdown preview.
Process 03Formatting & Linting
- Default formatter: Set Prettier and enable format on save.
- ESLint: Match project config; avoid conflicting formatters.
- EditorConfig: Add one to lock spacing/line endings.
Process 04Terminal & Shell
- Built-in terminal: Use PowerShell on Windows, zsh on macOS, bash/zsh on Linux.
- Project root: Open the terminal at project root; run npm/yarn scripts from there.
Process 05Debugging
- Launch configs: Set up for Node/Next and tests.
- Breakpoints: Use breakpoints and watch expressions; reduce console.log spam.
Process 06Git in the IDE
- Stage & commit: Use Source Control to review diffs before committing.
- Conflicts: Resolve with the merge editor; keep commits focused.
- Sync: Pull frequently; follow project rules (rebase/merge).
Process 07Productivity
- Snippets: Create snippets for components/headers.
- Shortcuts: Learn multi-cursor, search/replace, peek definitions.
- Layouts: Save a layout with terminal + problems + git visible.