Show Notes
Parker walks through the extension stack and VS Code setup that helped him move from debugging to deployment, with a focus on consistency across his Windsurf and Cursor repos and practical, non-fluffy tips.
Core idea: one solid editor setup across monorepos
- A cohesive VS Code environment that combines powerful formatting, linting, and visibility tools.
- A mix of language support, AI-assisted workflows, and UI tweaks to keep code quality high and deployment faster.
Essential extensions I rely on (by category)
-
Formatting, linting, and code quality
- Biome: all-in-one formatter + linter for web projects; fast and strict (Rust-based).
- Black: Python formatter.
- Ruff: Python linter.
- Error Lens: inline errors shown in-editor for quick fixes.
- Pretty TypeScript errors: nicer TS error messages on hover.
- ES7 React/Redux/JSX Snippets: handy shorthands for common React patterns.
-
AI, productivity, and visibility
- ChatGPT for code (Mac OS): quick code-facing AI aid with a small, useful tag.
- Token Count: shows token usage for a file, useful for estimating LLM costs.
- To-do Tree: surfaces and prioritizes to-dos/fixes in the codebase.
- Walk Time: tracks time spent on each project.
-
Navigation, visibility, and quality signals
- Bracket Pair Colorization (trigger): visual bracket matching to reduce mental load.
- Color Highlight: shows the actual color behind hex/HSL values.
- Rainbow CSV: nice formatting for CSVs in the repo.
- GitLens: rich Git history and blame insights.
- End: (contextual hint about inline feedback and tooling; focus remains on solid surface tools)
-
AI-assisted development and integrations
- Dino: TypeScript/JavaScript language server (Deno integration).
- Dev Containers: work with containerized dev environments.
- Docker: Docker tooling inside VS Code.
- Live Share: quick pairing and collaboration sessions.
- SQL Tools: SQL/PostgreSQL tooling inside the editor.
- Prisma, Supabase, PostgreSQL Tools: database/schema support inside the IDE.
- Pretty, fast TypeScript/JS tooling: “Pretty TypeScript errors” as noted above.
- Tailwind Docs and Tailwind CSS: quick access to Tailwind docs from the editor.
- Simple React Snippets: quick React code snippets.
- ES7-related snippets (oversight noted above) and general React/JS tooling.
-
Language and framework support you’ll likely use
- Lua (Neovim config support inside VS Code)
- Go (Go language support)
- Python: Pylance, Python extension, Python debugger
- XML/YAML/JSON: XML Tools, YAML Tools, JSON Language features
- Swift (if you touch Swift)
- Postgres tools, Prisma, and SQL-related extensions for DB-centric work
-
UI, themes, and polish
- Catppuccin icons and Capuccin/Frappe theme variants (visual consistency)
- Noctis (theme option, though not Parker’s current primary choice)
- Pace (a tasteful UI/theme choice to reduce fatigue)
-
Vim-style editing for speed
- Vim extension: Parker credits modal editing as a big productivity gain; configured to avoid performance pitfalls.
-
Remote and container work
- Remote - SSH (implicit in “remote stuff for dealing with VPS”)
- Dev Containers, Docker (for consistent dev environments)
Settings highlights (what Parker tweaked)
-
Font and appearance
- Font: SF Mono with Nerd/ligature styling for better readability.
- Font size: 13; line height: 17.
- Cursor blinking: smooth.
- Icon theme: Catppuccin icons; color theme: Catppuccin (Frappe variant).
-
Editor behavior
- Relative line numbers for Vim motions (editor.lineNumbers: "relative").
- System clipboard as default for easy copy-paste between apps.
- Vim extension settings tuned to prevent performance issues during heavy edits.
-
General VS Code polish
- A lean setup with minimal bloat, prioritizing speed and consistency across projects.
-
Sample settings.json snapshot
json
{
"editor.fontFamily": "SF Mono",
"editor.fontSize": 13,
"editor.lineHeight": 17,
"editor.cursorBlinking": "smooth",
"editor.lineNumbers": "relative",
"workbench.iconTheme": "catppuccin-icons",
"workbench.colorTheme": "Catppuccin (Frappe)",
"vim.useCtrlKeys": false
}
Note: this is a representative snapshot of his approach; adjust for your environment.
AI docs workflow: pattern Parker is exploring
- Idea: separate AI docs per app, with an integrated memory bank and prompts.
- How to use it in practice:
- Build AI docs for an app with concrete examples and usage notes.
- Create a memory bank of prompts and prompts templates you reuse.
- Attach the memory and prompts to each app so AI tools behave consistently.
- Takeaway: this pattern helps you scale AI-assisted development across multiple services without reinventing the wheel each time.
Takeaways and practical tips
- Start with a focused extension set. Too many extensions degrade performance and cognitive load.
- Unify your editor across monorepos to shave weeks off deployment cycles.
- Use Vim mode for motion efficiency, but tune it to avoid editor slowdown.
- Leverage inline errors and token-aware tooling to keep feedback fast and deployment-ready.
- Build an AI-docs memory system to scale AI-assisted development across projects.
Links
- Cursor Memory Bank - Memory bank + prompts approach for Cursor AI docs
- Catppuccin icons and Catppuccin theme (Frappe)
- Vim extension for VS Code
- Deno language server
- Dev Containers and Docker extensions
- Rainbow CSV, Error Lens, Pretty TypeScript Errors
- Tailwind CSS IntelliSense
- Simple React Snippets and ES7 React/Redux/JSX Snippets
- SQLTools, Prisma, Supabase extensions
- Live Share, GitLens, and Todo Tree
- WakaTime and other productivity helpers
If you found this setup helpful, start with one or two core extensions (formatting + a debugging-aid extension) and gradually layer in the rest as you stabilize your workflow. What extension would you add to your setup first?