How to Set Up VS Code for Web and AI App Building

VS Code works best when you treat the project folder as the center of the workflow.

When you open a folder or repository, the editor can understand the files inside it, detect Git repositories, scope workspace settings, and start the integrated terminal from that project.

That sounds basic, but it matters more once AI agents enter the workflow.

A coding agent is much more useful when it can inspect the repository structure, read the relevant files, run commands from the correct directory, and verify the changes it makes.

The project folder becomes the shared context between you, the editor, and the agent.

One of the most useful parts of VS Code is the terminal built directly into the editor.

It behaves like a normal shell, so you can use it to:

• install dependencies
• start local development servers
• run builds
• execute tests
• use Git
• run command-line AI tools
• deploy applications
• inspect logs

For modern web development, this is usually where commands such as these run:

npm install npm run dev npm run build git status git diff

The important point is not memorizing commands.

It is getting comfortable with the idea that the editor and terminal are part of the same workflow.

VS Code includes built-in Git integration, but it uses the Git installation on your computer underneath.

Once a repository is open, VS Code can show:

• modified files
• new files
• diffs
• staged changes
• commits
• branches
• merge conflicts
• repository history

You can use the graphical Source Control panel, the command line, or both.

I like having both available because they solve slightly different problems.

The visual diff is useful for reviewing what changed.

The terminal is often faster when you already know the Git command you want.

This becomes especially important when coding agents are making changes for you.

Before accepting a large AI-generated edit, git diff is still one of the simplest ways to understand what actually changed.

VS Code has thousands of extensions.

That does not mean you should install hundreds of them.

Extensions can add language support, formatters, debuggers, source-control integrations, AI tools, themes, and other functionality.

My general rule is simple:

Install an extension because the workflow requires it.

Not because a setup video told you to install twenty things.

A web-development setup might include tooling for:

• formatting
• linting
• TypeScript
• framework support
• GitHub
• AI-assisted coding
• database access
• browser testing

But the exact extension list should depend on the project.

The cleaner the environment, the easier it is to understand which tool is doing what.

VS Code Profiles let you create separate sets of:

• settings
• extensions
• keyboard shortcuts
• snippets
• tasks
• MCP servers

and switch between them depending on the type of work you are doing.

This is useful if your web-development environment is very different from your data-science or automation environment.

Instead of carrying every extension into every project, you can create a focused profile for a particular workflow.

For example:

Web + AI Development

could contain the tools you use for:

• TypeScript
• React / Next.js
• Git
• AI coding
• browser automation
• MCP integrations

while another profile stays much lighter.

Profiles can also be exported and shared.

That makes them a useful way to create a repeatable development environment instead of rebuilding the same editor setup every time.

Once you have an editor configured the way you want, Settings Sync can synchronize much of that configuration across machines.

VS Code currently supports syncing:

• settings
• keyboard shortcuts
• snippets
• tasks
• UI state
• extensions
• profiles

That makes the environment less dependent on one computer.

If you replace a laptop or work across multiple machines, you do not have to rebuild the entire editor configuration manually.

There are exceptions, especially around remote development environments, so important project configuration should still live inside the repository where appropriate.

The biggest change in development tooling is that the editor is increasingly becoming a workspace for agents, not just humans.

An AI coding tool can now do much more than autocomplete a line.

Depending on the tool and permissions, an agent can:

• inspect files
• search a repository
• edit multiple files
• run commands
• execute tests
• read errors
• use Git
• interact with external tools
• verify its own work

That makes editor setup more important, not less.

If the project structure is confusing, the scripts do not work, the environment variables are unclear, or the repository cannot build cleanly, the agent inherits those problems.

A clean development environment gives the model better tools and clearer feedback.

Model Context Protocol provides a standard way for AI tools to connect to external systems.

VS Code supports MCP servers that can expose tools, resources, and prompts to AI agents.

That means a coding agent no longer has to operate only on local source files.

It can potentially:

• inspect a Figma design
• query a database
• open a browser
• read project documentation
• interact with external APIs
• inspect deployment environments

The useful part is not connecting everything possible.

It is giving the agent access to the few tools it needs to complete the task reliably.

A good development environment should be reproducible.

For anything that belongs specifically to a repository, keep the configuration inside the repository when possible.

That might include:

• recommended extensions
• formatting rules
• lint configuration
• TypeScript configuration
• environment-variable examples
• scripts
• tasks
• AI instructions
• MCP configuration where appropriate

VS Code supports workspace-level extension recommendations through .vscode/extensions.json, which lets a repository suggest the tools needed for that project without requiring them globally.

This is especially useful for collaborative or agentic development because the project carries more of its own operating instructions.

It is easy to spend too much time customizing development tools.

Themes, fonts, extensions, terminal prompts, keyboard shortcuts, and AI integrations can all be useful.

But the point of the setup is to build things.

A good VS Code environment should make a few important tasks easy:

Understand the repository.

Edit the code.

Run the project.

Review changes.

Use version control.

Give AI tools enough context to work safely.

Everything else is optional.