Tooling changes fast. The stack that was essential last year might be outdated today. Here's a curated guide to the tools that make modern web development efficient and enjoyable.
VS Code Extensions That Matter
{
"recommendations": [
// Essential
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"prisma.prisma",
// TypeScript
"ms-vscode.vscode-typescript-next",
"yoavbls.pretty-ts-errors",
// AI Assistance
"github.copilot",
"continue.continue", // Open source alternative
// Quality of Life
"usernamehw.errorlens",
"christian-kohler.path-intellisense",
"streetsidesoftware.code-spell-checker",
// Git
"eamodio.gitlens",
"mhutchie.git-graph"
]
}Settings that matter:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"typescript.preferences.importModuleSpecifier": "non-relative",
"typescript.updateImportsOnFileMove.enabled": "always"
}CLI Tools: The Developer's Swiss Army Knife
# Package management
pnpm # Faster, saves disk space
bun # Even faster, JS runtime too
# Project scaffolding
npx create-next-app@latest
npx create-t3-app@latest
# Development
npx tsx # Run TypeScript directly
npx tsc --noEmit # Type check without build
# Testing
npx vitest
npx playwright test
# Database
npx prisma studio # Visual DB editor
npx drizzle-kit studio
# Utilities
jq # JSON processing
fzf # Fuzzy finder
ripgrep (rg) # Fast grep
bat # Better cat
eza # Better lsBrowser Extensions for Development
React DevTools: Essential for React debugging
Redux DevTools: If using Redux/Zustand
Wappalyzer: Identify tech stacks on any site
Lighthouse: Performance auditing
JSON Formatter: Pretty-print API responses
ColorZilla: Pick colors from any webpage
AI Tools That Actually Help
const aiToolkit = {
coding: {
githubCopilot: {
use: 'Inline completions, especially for boilerplate',
cost: '$10/month',
},
cursor: {
use: 'Codebase-aware AI, refactoring, debugging',
cost: '$20/month',
},
claudeCode: {
use: 'Complex tasks, agent-like capabilities',
cost: 'Usage-based',
},
},
research: {
perplexity: 'Technical research with citations',
claude: 'Deep analysis, long documents',
},
design: {
v0: 'UI component generation',
midjourney: 'Visual assets',
},
}Staying Updated: Learning Resources
const learningResources = {
newsletters: [
'JavaScript Weekly',
'React Status',
'TLDR Web Dev',
'ByteByteGo (system design)',
],
podcasts: [
'Syntax.fm',
'JS Party',
'Changelog',
],
youtube: [
'Theo - t3.gg',
'Fireship',
'Web Dev Simplified',
'Jack Herrington',
],
blogs: [
'kentcdodds.com',
'joshwcomeau.com',
'overreacted.io',
],
practice: [
'exercism.io',
'frontend mentor',
'advent of code',
],
}Project Setup Checklist
const newProjectChecklist = [
// Tooling
'✓ TypeScript strict mode',
'✓ ESLint + Prettier configured',
'✓ Husky + lint-staged for pre-commit',
'✓ Commitlint for conventional commits',
// Testing
'✓ Vitest for unit tests',
'✓ Playwright for E2E',
'✓ MSW for API mocking',
// CI/CD
'✓ GitHub Actions for CI',
'✓ Preview deployments',
'✓ Automated dependency updates',
// Observability
'✓ Error tracking (Sentry)',
'✓ Analytics (Vercel/Plausible)',
'✓ Web Vitals monitoring',
]Key Takeaways
Invest in your editor. VS Code extensions compound productivity over time.
Master the CLI. Terminal fluency separates senior devs from juniors.
AI is table stakes. Use Copilot or alternatives—the productivity gain is real.
Stay current. Newsletters and podcasts keep you updated without active effort.
Standardize projects. A consistent setup checklist saves hours on each new project.