Microsoft VS Code Setup
The industry-standard editor, configured for FFC development
VS Code is free, open source, and the most widely documented editor in the world. With the GitHub Copilot free tier in agent mode plus a couple of MCP servers, it can open issues, write code, run our Playwright tests, and prepare pull requests for you.
This is an advanced environment. If you are new to development, start with Claude Desktop — most charity website work never needs more. Come here when you want local builds, browser debugging, or larger refactors. VS Code's agent mode is Copilot-native, but you can also run Claude or Codex as the agent. See the setup hub to compare options.
On this page
1. What You Are Building
You are turning a plain VS Code install into an AI-assisted FFC development environment. The pieces: VS Code itself, the toolchain (Git, Node, pnpm), GitHub Copilot in agent mode as your AI agent, a GitHub connection, and MCP servers for Playwright and GitHub.
Agent mode is the key.Copilot's Ask and Edit modes cannot use MCP tools. You must select Agent in the Copilot Chat mode dropdown for the Playwright and GitHub servers to be usable.
2. Install VS Code
- Download VS Code from code.visualstudio.com for your operating system.
- Run the installer and accept the defaults.
- On Windows, allow the “Add to PATH” and “Open with Code” options so you can launch from the terminal with
code .. - Launch VS Code.
3. Install Git, Node, and pnpm
FFC sites are Next.js projects, so you need Git, Node.js 20+ and pnpm 9 (our repos pin pnpm 9). Do not look up install commands — let Copilot do it for you. Open Copilot Chat in Agent mode and ask:
“Set up my machine for Free For Charity Next.js development. Check whether Git, Node.js 20 LTS or newer, and pnpm 9 are installed, install anything missing using the right method for my operating system, and confirm the versions when you are done. Our repositories pin pnpm 9, so match that.”
4. Enable GitHub Copilot (Agent Mode)
- In the Extensions view (
Ctrl/Cmd+Shift+X), install GitHub Copilot and GitHub Copilot Chat. - Click the Copilot icon and sign in with your GitHub account. The Copilot free tier is enough to get started.
- Open Copilot Chat, click the mode dropdown, and choose Agent. This is required for MCP tools to be visible.
The Configure Tools button in the chat input lets you see and toggle which tools (including MCP servers) the agent may use.
5. Connect to GitHub
5.1 — Confirm org membership
Make sure a maintainer has added you to the FreeForCharity organization, and accept the invitation.
5.2 — Sign in to GitHub in VS Code
Use the Accounts menu (bottom-left) to sign in to GitHub, and install the GitHub Pull Requests extension so you can manage issues and PRs from the sidebar. Copilot can set up your Git identity and confirm the connection for you.
“Help me connect VS Code to GitHub. Set my Git name and email, confirm I am signed in, install the GitHub Pull Requests extension, and verify I have access to the FreeForCharity organization.”
6. Recommended Extensions
These match the FFC tech stack and keep you consistent with CI.
- •ESLint— matches our lint step
- •Prettier— matches our formatting step
- •Tailwind CSS IntelliSense— class autocompletion
- •Playwright Test for VS Code— run/debug E2E tests
- •GitHub Pull Requests— issues and PRs in the sidebar
- •GitHub Copilot + Copilot Chat— the AI agent
Many FFC repos ship a .vscode/extensions.json with these recommendations. When you open the repo, VS Code offers to install them in one click.
7. Configure MCP Servers
VS Code reads MCP server configuration for a workspace, and the servers you need — GitHub (issues and PRs) and Playwright (browser testing) — are available without hand-writing any config. Rather than copy a snippet that could be stale, let Copilot set them up in agent mode:
“Configure the MCP servers I need for this workspace so you can work on Free For Charity repositories: a GitHub server (issues and pull requests) and a Playwright server (for our end-to-end tests). Add them however the current version of VS Code expects, start them, and confirm both appear in Configure Tools. I'll approve any sign-in.”
Verify: make sure Copilot Chat is in Agent mode (Ask/Edit cannot use MCP tools), open Configure Tools, and check the GitHub and Playwright tools are listed and enabled. The first Playwright run downloads a browser — that is expected.
8. Clone a Template Repo
Practice on the FFC_Single_Page_Template, the starting point for new charity sites.
Let Copilot clone it, install dependencies, and run the checks — it knows the commands for the current toolchain:
“Clone FreeForCharity/FFC_Single_Page_Template, open it in this window, install dependencies, then run our full set of checks in the order this repo's AGENTS.md describes (formatting, linting, build, tests, and end-to-end tests). For an example of a finished Free For Charity site, also pull up FreeForCharity/FFC-IN-ffcadmin.org. Do not cancel long-running commands; tell me if anything fails.”
The build and end-to-end run can take a minute — let them finish.
9. Your First Issue to Merge
With Copilot agent mode plus the GitHub and Playwright MCP servers, run the full FFC contribution loop on a small change.
Step 1 — Pick or open an issue
Ask the agent to list open issues, or open a new one describing your change.
“Using the GitHub MCP server, list the open issues on this repository. If there is no issue for the small change I want to make, open a new issue titled ‘<short title>’ describing it.”
Step 2 — Branch and edit
Have the agent create a branch (never main) and make the change. Review the diff in Source Control.
“Create a new branch for issue #<number> (do not commit to main) and make the change it describes. Follow the repo's AGENTS.md conventions, and use FreeForCharity/FFC-IN-ffcadmin.orgas an example of how a finished site is built. When you are done, show me the full diff so I can review it before we go further.”
Step 3 — Run the checks
Have the agent run our full set of checks — formatting, linting, build, unit tests, and end-to-end tests — in the order our AGENTS.md specifies (build before tests, to match CI). The agent reads the exact commands from the repo, so you do not have to.
“Run our full pre-commit checklist in the order documented in this repo's AGENTS.md(formatting, linting, build, unit tests, then end-to-end tests). Do not cancel anything. Fix any failures and re-run until everything passes.”
Step 4 — Open a PR and merge
Via the GitHub MCP server, the agent commits with a Conventional Commit message, pushes, and opens a PR linked with Fixes #NNN. After CI passes and a maintainer approves, it merges.
“Commit the changes with a Conventional Commit message, push the branch, and open a pull request that links the issue with ‘Fixes #<number>’. Then watch the CI checks and fix anything that fails until they are green.”
Every future change on any FFC charity or website repo follows these same four steps.
10. Security and Good Habits
- ✕Never paste tokens or keys into chat, code, commits, or any workspace MCP config file (those can be committed to the repo).
- ✓Use VS Code's secure input prompts or a git-ignored
.envfor any secrets. - ✓Review every diff and command before approving the agent.
- ✓Work on a branch and open a PR — never push directly to main.
See the FFC security rules for the full policy.
11. Troubleshooting
| Symptom | Fix |
|---|---|
| MCP tools are invisible in chat | Switch Copilot Chat to Agent mode — Ask/Edit cannot use MCP tools. |
| Server fails to start | Ask Copilot to re-add the server the way the current version of VS Code expects, then reload the window. |
| Playwright cannot launch a browser | Ask the agent to install the Playwright browsers once. |
| Push rejected | Confirm FreeForCharity org membership and that you are on a branch, not main. |